React-native: 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"?

[zjiayingok]

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 [email protected] & [email protected], 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 [email protected] 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.

[njbmartin]

A fix #17720 was merged in to master. Hopefully it won't be long before it's released as 0.52.3 and 0.53.0-rc.2

[Haixiang6123]

Same problem with RN version 0.53, sigh~.

The Expo keep loading with this error.... Finally, I have to stop remotely debug to keep learning RN..... so sad.

[njbmartin]

@ide Any plans to release this as a 0.52.3 hotfix?

[ide]

No plans from me but we can cherry pick it into the upcoming 0.53 release.

[esam091]

It is possible to monkey patch if you can't wait for new release

• Copy the contents of this file and paste it into node_modules/react-native/local-cli/server/middleware/getDevToolsMiddleware.js
• Install patch-package by running yarn add --dev patch-package postinstall-prepare
• Run yarn patch-package react-native, a file should be created in patches/react-native+0.52.patch, this file needs to be committed in your repository
• Add the following script into your package.json and run yarn install, or you can run yarn patch-package directly if needed
  "scripts": { "prepare": "patch-package" }

You can find more details on monkey patching in patch-package repo.

[xieliying]

Same program here (react-native version 0.52.2), then I downgrade to 0.51.0, it still happened......
But finally I have found a way to solve this problem, maybe it can help you
And now react-native Version is 0.51.0,
react version is 16.0.0,
run on my iPhone X and Simulator, everything is OK.

1. Start remote JS Debugging in your device or your simulator;
   2.Then open your Chrome, you will see a "React Native Debugger" page;
   3.New a Tab, type chrome://apps/, then search "react developer tools", download and install it;
   4.If react developer tools did not work, new a tab, type chrome://extensions/, and enter extensions manager;
   5.Find React Developer Tools, enabled "Allow access to file URLs";
   6.After finished above, go back to your iPhone or your Simulator, reload your RN App;

[TheDutchCoder]

We face the same issue. Unsure how this is not a high priority candidate for a fix, I guess people don't need to debug their code on real devices?

We will downgrade to 0.51.0 to see if it fixes the issue. Will edit this post with an update.

Edit: 0.53.0 works, thanks!

[ide]

@njbmartin sent a PR to fix this two weeks ago (thank you!), which was merged and released with 0.53.x.

[wjielim]

After upgrading React Native to 0.53.0, the problem still exists. Please advise, thank you.

[dmueller39]

Remember to restart your packager and restart your browsers (or at least the debugger tab) after upgrading.

[cagataycali]

Upgrade 0.53.0 then watchman watch-del-all && react-native start --reset-cache. That will work for you guys.

[akash-cp]

If you are on 0.53.0 then change IP to localhost.

[degodfather]

Thanks @akash-cp it worked!

[luanfelipecosta]

I am using expo, when updated for 0.53, I got a error:
react version mismatch between react-native 0.53.0 and native-scripts 0.52

package.json:

"expo": "^25.0.0"
"react": "16.2.0"
"react-native": "0.52.0"

[KangYoosam]

+1

[kanteankit]

I am facing the same issue as @luanfelipecosta. I have the same package.json.

I tried running watchman watch-del-all && react-native start --reset-cache,but it did not fix it.
I tried deleting the node_modules and re-installing the packages, that also doesn't fix the issue.
I think we should wait for this doc to get updated: https://github.com/react-community/create-react-native-app/blob/master/VERSIONS.md.

[njbmartin]

The latest version of expo uses [email protected] and therefore any projects created using CRN might face this issue.

The fix I did was not hotfixed into 0.52 but is available in the latest [email protected].

As CRN is now the default method of creating React Native apps, either expo needs to be updated to use 0.53 or this fix needs to be hotfixed in 0.52.

[luanfelipecosta]

@kanteankit
a workaround for this problem (who is using expo) is install a CORS Toggle in google chrome.
http://bit.ly/2o4mVNI
for me worked as a charm.

[kanteankit]

@njbmartin So what you are saying is we should wait for Expo to release a new version that supports [email protected]

[Monte9]

@njbmartin ah yes. You are right, I was using expo sdk 25 and ran into this issue.

@luanfelipecosta's suggestion works for me. Thanks man!

[wjielim]

I'm still facing the same issue. I've tried all the possible solutions stated above but to no avail.
I have tried to upgrade RN to 0.53.3, yet it still gives the same problem.
Am on expo version 25.0.0.

[thomashagstrom]

Google Chrome plugin COORS Toggle as @luanfelipecosta suggested, works awesome ( http://bit.ly/2o4mVNI )

[vinceyuan]

Upgrade react native to 0.53.3
watchman watch-del-all && react-native start --reset-cache
Start Remote JS Debugging
If the URL in Chrome is not http://localhost:8081/debugger-ui/, change it.

[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]

[email protected] 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 [email protected] 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