I currently work on a React-Native mobile app.

The requests to the server API using fetch works fine, but when I open the "Debug JS Remotely" with Google Chrome, it creates some kind of localhost server and the calls are made from it, and I get the following error from the server API:

XMLHttpRequest cannot load . Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access.

It's pretty annoying not to be able to track the requests to the server in debug mode.

Any of you have faced a similar issue and do you have a way around it?

Thanks

I currently work on a React-Native mobile app.

The requests to the server API using fetch works fine, but when I open the "Debug JS Remotely" with Google Chrome, it creates some kind of localhost server and the calls are made from it, and I get the following error from the server API:

XMLHttpRequest cannot load https://my.server./data. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access.

It's pretty annoying not to be able to track the requests to the server in debug mode.

Any of you have faced a similar issue and do you have a way around it?

Thanks

• javascript
• api
• react-native
• cross-domain

Share Improve this question Follow asked Dec 9, 2016 at 14:49 alexmngnalexmngn 9,6572020 gold badges7575 silver badges136136 bronze badges 1

• any specific solution to this problem , I am still facing issue with ios only , – Prateek Commented Oct 6, 2017 at 12:59

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

I actually found a solution: I installed the Chrome extension Allow-Control-Allow-Origin:* https://chrome.google./webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

For react-native change your debug url in chrome http://localhost:8081/debugger-ui/ with http://192.168.xxx.xx.xip.io:8081/debugger-ui/

Ex: http://192.168.10.112.xx.xip.io:8081/debugger-ui/

OR

Add

mres.setHeader('Access-Control-Allow-Origin', '*');

to

/node_modules/metro/src/Server\index.js