0.52 - CORS issue with JS Remote Debugging when using xip.io

[njbmartin]

Is this a bug report?

Yes.

Have you read the Contributing Guidelines?

Yes.

Environment

Environment:
OS: macOS High Sierra 10.13.2
Node: 9.4.0
Yarn: Not Found
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: ^16.2.0 => 16.2.0
react-native: ^0.52.0 => 0.52.0

Target Platform: iOS 8

Steps to Reproduce

Note: I upgraded to 0.52 last night using react-native-git-upgrade, it had been working previously on 0.51.

1. Run development app on real iOS device, which loads the JS bundle from http://192.168.0.13.xip.io:8081/index.delta?platform=ios&dev=true&minify=false
2. Enable JS Remote debug tools, which opens http://localhost:8081/debugger-ui/ in Chrome.
3. Bundle reloads and Chrome DevTools console displays the following error:

Failed to load http://192.168.0.13.xip.io:8081/index.delta?platform=ios&dev=true&minify=false: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Expected Behavior

App should load correctly and not throw an error when trying to debug JS remotely.

Actual Behavior

Failed to load http://192.168.0.13.xip.io:8081/index.delta?platform=ios&dev=true&minify=false: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Reproducible Demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

Fresh react-native app using react-native init.

https://github.com/njbmartin/react-native-xip

[njbmartin]

Did some digging, and found that if I modify https://github.com/facebook/metro/ _processDeltaRequest to include mres.setHeader("Access-Control-Allow-Origin", "*"); it works. I don't believe this is enough to fix the issue though.

[njbmartin]

Just had to double check if it was indeed introduced since v0.51.0 which previously worked for me, it does indeed work as expected with 0.51.0

https://github.com/njbmartin/react-native-xip/tree/v.0.51

[njbmartin]

Above is the request using v0.52.0.

The difference is the request header has Origin: http://localhost:8081

[mikeborozdin]

Hi @njbmartin,

You've saved my life!

I've upgraded to 0.52.0 as well and noticed that it wouldn't run on iOS with Remote Debugger On.

The 0.52.0 release seems to be quite buggy. I already wasted quite a few hours fighting with another issue that wouldn't let me build an app - #17274.

So, could you possibly change the title of this issue to something more alarming, so that the react-native maintainers notice it? Something like "Remote Debugging Doesn't Work on 0.52.0"?

[zjycpzjy]

I met the same problem on 0.52.0。
1.Unable to load script from assets 'index.android.bundle'. Make sure your bundle is packaged correctly or you're running a packager server.
2.http://localhost:8081/index.delta?platform=android&dev=true&minify=false
3.com.facebook.react.common.DebugServerException: Could not connect to development server.

[mobdim]

I have same issue.

[njbmartin]

Looks like there was a lot of oversight in this release.

I too faced the other issues #17274 and #17610.

For this issue, I think it's definitely metro or one of it's dependencies as I had a brief success downgrading the version, but it way too fiddly.

[hugoh59]

Facing the same issue with 0.52.

[itinance]

Facing the same without xip.io, just with IP-address of my Macbook while running application on device per ip-address of my working machine.

It happens only when debug-mode was enabled and failed then to load the code. Without debug-mode everything works as expected:

Failed to load http://192.168.178.24:8081/index.delta?platform=ios: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I have already whitelisted this IP-Address and also localhost in Info.plist:

 <key>NSAppTransportSecurity</key>
 <dict>
 <key>NSExceptionDomains</key>
 <dict>
 <key>localhost</key>
 <dict>
 <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
 <true/>
 </dict>
            <key>192.168.178.24</key>
            <dict>
                <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
 </dict>
 </dict>

But it still appears. At the end the ReactNative Application can't load its code while Debug-Mode is enabled. Without debug mode everything works as expected. Any ideas?

[RodrigoCS]

This is happening to me as well rn 0.52.0 only when debugging js remotely

[cagataycali]

Same here 🤙

But I fixed with downgrade react-native to 0.51.0

Cause I do not have enough time for waiting PR.

Respects.

[luanfelipecosta]

Same here, I downgraded to react-native to 0.51.0 and react to 16.0.0 it works well in iOS Simulator even with the inspector on, but if I try to run in a real device (iPhone 7) I still got the issue.

[cagataycali]

@luanfelipecosta I did not downgraded react to 16.0.0, it works in real (iPhone 7) device. You should try upgrade react.

[export-mike]

I've downgraded to react-native@0.51.0 & react@16.0.0, I'm getting the issue still - No idea but could this be a chrome related? Chrome: Version 63.0.3239.132

[njbmartin]

I'm not sure it is Chrome related, as I was able to downgrade to 0.51 and it works just fine. Take a look at the screenshots above. Something, somewhere, is adding origin: localhost in 0.52

[njbmartin]

As an even better workaround... replace http://localhost:8081/debugger-ui/ with http://192.168.0.13.xip.io:8081/debugger-ui/ or whatever the ip is.

Voted not the best solution...

[cagataycali]

That's not usable for daily development environment. @njbmartin

[mmazzarolo]

I'm having the same issue on:

• MacOS Sierra
• React-Native 0.52.0

Simply downgrading to React-Native 0.51.0 (by just running npm i -S react-native@0.51.0 seems to fix the issue).

Remember that, after downgrading, you should also reset the cache:
watchman watch-del-all
npm run start -- --reset-cache

[mgscreativa]

I'm using CRNA and for a workaround I used http://10.0.0.2:19001/debugger-ui/ where 10.0.0.2 is my LAN Ip address

[jugutier]

👍 +1 on this, same issue for me:

"Failed to load http://10.0.1.57.xip.io:8081/index.delta?platform=ios&dev=true&minify=false: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
(index):188 Uncaught (in promise) TypeError: Failed to fetch"

[njbmartin]

For those having an issue with this, please check out the PR #17720 and see if that fixes the issue for you.

[Sw0rdstream]

As a workaround, simply change your URL of Chrome from http://localhost:8081/debugger-ui/ to http://192.168.XXXX.XXXX.xip.io:8081/debugger-ui/

In @njbmartin 's case, http://192.168.0.13.xip.io:8081/debugger-ui/

[ou2s]

Same issue with 0.52... Critical bug for me. I think we are also going to downgrade RN 0.51

[ankitkante]

Facing this issue even in 0.53. I have to use the IP address of my computer instead of localhost

[laughingguffly]

Same problem here. Follow Sw0rdstream work around fixed for me.

[kenturley]

Been getting this since about the same time this Issue appeared (Jan 15). Any time I create a CRNA app and try to debug it with Chrome. To get by, I would downgrade Expo and react native to previous versions: EXPO SDK to 24, React to 16.0.0, React Native to 0.51.x (matching the row shown for Expo SDK version 24.0.0. at https://github.com/react-community/create-react-native-app/blob/master/VERSIONS.md). I hadn't created a new CRNA app for a few weeks until today. Tried it and got the same thing. Came back here to see if there was any new news and saw the Google CORS Toggle suggestion from @luanfelipecosta. As others have reported, it works great. Hopefully this problem will get resolved before long, but until then, the CORS toggle is a quick and painless fix. Thanks @luanfelipecosta!

[dgrcode]

CORS Toggle might work great, but they ask for the permission "Read and change all your data on the websites that you visit"

[jackwilsdon]

@dgrcode you can find the source of it here (+ build it yourself) if you're worried; https://github.com/demesne/cors-toggle

[mrharel]

react-native@0.54.0 removed the use of xip.io which should solves this issue without the need for all the hacks suggested above. You can read more about it in the commit 40a8434

[julioe]

Try to install CORS toggle extension, it helped me with similar problem

[arapocket]

I updated to react-native@0.54.2 still have the same issue.

[MaxInMoon]

Looking the changelog, it should be fixed in the 54.0:

"Fix JS debugger issues related to CORS (29f8354)"

[alainib]

i have this error on mac with
"react": "^16.3.1",
"react-native": "0.55.0",

i installed CORS toggle extension as @julioe says and now i can run in debug mode but with a lot of
warning "Warning: componentWillReceiveProps is deprecated and will be removed in the next major version."

[hery]

@MaxInMoon I still have this issue in 0.54.0-rc.3. I had to get that version because of another issue on 0.54.4.

@julioe's fix worked for me as well! It seems to disable CORS for every tab though, not exactly safe.

@alainib These warnings are intended and expected behavior. See this blog post
https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html

[rayronvictor]

Using http://localhost:8081/debugger-ui/ instead of http://192.168.0.21:8081/debugger-ui/ worked for me.

[zouyan532]

Thanks @akash-cp it worked!

[AyubaMakoa]

rayronvictor style solved my problem too.

[roadev]

disabling the CORS plugin in chrome made it work!

[HFmoney]

@roadev how to disabling the CORS plugin? thanks.

[roadev]

@HFmoney Just ... click on it (on the chrome plugins bar - right side) and disable the "Enable cross-origin resource sharing".

[arfa123]

The solution for this problem is simply install the extension "Allow-Control-Allow-Origin" in your chrome browser. this works for me you all can try.

[letanthang]

@arfa123 You save my day! Thanks. The extension "Allow-Control-Allow-Origin" .
Just remember to disable it when not using because i cause trouble with some website.

[zhcsyncer]

If you also use Webstorm, you can do this.

[efleurine]

like @rayronvictor Using http://localhost:8081/debugger-ui/ instead of http://192.168.0.21:8081/debugger-ui/ worked for me.

[0xc0d3r]

IDK why it's happening with 0.53. For now we can proceed with localhost instead of your machine IP address. http://localhost:8081/debugger-ui/

[bsbechtel]

I'm having this issue with RN 0.55.4. Localhost or my machine's IP didn't work. The only thing that worked for me was disabling CORS via the chrome extension.

[HelpPal]

didn't work for me.

[erdemoflaz]

problem solved, it's work me. http://localhost:8081/debugger-ui/

[crazy4groovy]

Note that http://127.0.0.1:8081/debugger-ui/ specifically doesn't seem to work, for CORS reasons.

[yusufdonmez]

In my case it is solved by deleting in Application debug menu "Dev Stettings" -> "Debug server host & port for device" erase all ip and port. after that it works again. JS Debug Remotly.

[jerryheir]

Working with RN 0.55.4, Iphone 12.1.1, google chrome latest as of Dec, 2018.
I solved it by using my IP address instead of "localhost"
http://192.168.0.21:8081/debugger-ui/

[naytun]

Adding this Extension to Chrome solves this issue:
Allow CORS: Access-Control-Allow-origin