React native network error (CORS) when using Chrome developer tools but working with react-native-debugger

Question

All requests seem to work when using react native debugger but when attempting to use chrome debugger at http://localhost:8081/debugger-ui/ I get:

Access to XMLHttpRequest at 'https:<my_api_url>' from origin 'http://localhost:8081' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

and a network error.

I tried:

• CORS Chrome extension
• adding 'Access-Control-Allow-Origin': '*' or 'Access-Control-Allow-Origin': true
• Axios body is set to undefined as recommended in Axios library issues.
• accessing debugger with localhost IP like: http://192.168.0.101:8081/debugger-ui/

but the CORS error is still there.

This seem to be related to something that Chrome debugger does differently than react-native-debugger....

I examined the headers for both debuggers and they look exactly the same:

Accept: "application/json"
Accept-Language: "en"
Access-Control-Allow-Origin: "*"
Content-Type: "application/json"
X-API-Client: "my-app:10.3.0-null-dev-devbuild"

Error shows up on both Android and iOS.

Answer 1

CORS is a browser feature, servers need to opt into CORS to allow browsers to bypass same-origin policy. You can try updating React Devtools or you can raise an issue on GitHub.