New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
njbmartin opened this Issue Jan 15, 2018 · 75 comments

Comments

Projects
None yet
@njbmartin
Copy link
Contributor

njbmartin commented Jan 15, 2018

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

This comment has been minimized.

Copy link
Contributor Author

njbmartin commented Jan 15, 2018

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

This comment has been minimized.

Copy link
Contributor Author

njbmartin commented Jan 15, 2018

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

image

@njbmartin

This comment has been minimized.

Copy link
Contributor Author

njbmartin commented Jan 16, 2018

image

Above is the request using v0.52.0.

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

@mikeborozdin

This comment has been minimized.

Copy link

mikeborozdin commented Jan 16, 2018

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

This comment has been minimized.

Copy link

zjiayingok commented Jan 17, 2018

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

This comment has been minimized.

Copy link

mobdim commented Jan 17, 2018

I have same issue.

@njbmartin njbmartin changed the title CORS issue with JS Remote Debugging when using xip.io 0.52 - CORS issue with JS Remote Debugging when using xip.io Jan 17, 2018

@njbmartin

This comment has been minimized.

Copy link
Contributor Author

njbmartin commented Jan 17, 2018

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

This comment has been minimized.

Copy link

hugoh59 commented Jan 17, 2018

Facing the same issue with 0.52.

@itinance

This comment has been minimized.

Copy link
Contributor

itinance commented Jan 18, 2018

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 comment has been minimized.

Copy link

RodrigoCS commented Jan 18, 2018

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

@cagataycali

This comment has been minimized.

Copy link

cagataycali commented Jan 18, 2018

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

This comment has been minimized.

Copy link

luanfelipecosta commented Jan 19, 2018

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

This comment has been minimized.

Copy link

cagataycali commented Jan 19, 2018

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

@export-mike

This comment has been minimized.

Copy link

export-mike commented Jan 20, 2018

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

This comment has been minimized.

Copy link
Contributor Author

njbmartin commented Jan 21, 2018

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

This comment has been minimized.

Copy link
Contributor Author

njbmartin commented Jan 21, 2018

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

This comment has been minimized.

Copy link

cagataycali commented Jan 21, 2018

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

@mmazzarolo

This comment has been minimized.

Copy link

mmazzarolo commented Jan 22, 2018

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

This comment has been minimized.

Copy link

mgscreativa commented Jan 23, 2018

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

This comment has been minimized.

Copy link

jugutier commented Jan 23, 2018

👍 +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

This comment has been minimized.

Copy link
Contributor Author

njbmartin commented Jan 24, 2018

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

@Sw0rdstream

This comment has been minimized.

Copy link

Sw0rdstream commented Jan 25, 2018

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

This comment has been minimized.

Copy link

ou2s commented Jan 25, 2018

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

@ankitkante

This comment has been minimized.

Copy link

ankitkante commented Jan 27, 2018

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

facebook-github-bot added a commit that referenced this issue Jan 27, 2018

Prevents JS Debugger issues with CORS
Summary:
<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.

Help us understand your motivation by explaining why you decided to make this change.

You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html

Happy contributing!

-->

See #17618

On certain networks, `xip.io` is used, but as the debugger will always using localhost a change upstream has resulted in a CORS issue (see screenshots in #17618). This change ensures that the debugger will always open with whatever configuration.

> This should be merged in as a patch of `0.52.x` as it affects current release, and `0.51.x` didn't have this issue.

Tested locally, could do with the people having the same issue in #17618 testing it out prior to merging.

(If this PR adds or changes functionality, please take some time to update the docs at https://github.com/facebook/react-native-website, and link to your PR here.)

<!--
Help reviewers and the release process by writing your own release notes

**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**

  CATEGORY
[----------]        TYPE
[ CLI      ]   [-------------]      LOCATION
[ DOCS     ]   [ BREAKING    ]   [-------------]
[ GENERAL  ]   [ BUGFIX      ]   [-{Component}-]
[ INTERNAL ]   [ ENHANCEMENT ]   [ {File}      ]
[ IOS      ]   [ FEATURE     ]   [ {Directory} ]   |-----------|
[ ANDROID  ]   [ MINOR       ]   [ {Framework} ] - | {Message} |
[----------]   [-------------]   [-------------]   |-----------|

[CATEGORY] [TYPE] [LOCATION] - MESSAGE

 EXAMPLES:

 [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
 [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
 [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
 [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
 [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
 [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->

[CLI] [BUGFIX] [local-cli/server/middleware/getDevToolsMiddleware.js] - Prevents JS Debugger issues with CORS
Closes #17720

Differential Revision: D6828205

Pulled By: hramos

fbshipit-source-id: 7e5d43db9faf7edc9444ba4214aca1a18e25dbd2
@laughingguffly

This comment has been minimized.

Copy link

laughingguffly commented Jan 27, 2018

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

@kenturley

This comment has been minimized.

Copy link

kenturley commented Feb 26, 2018

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

This comment has been minimized.

Copy link

dgrcode commented Feb 28, 2018

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

@jackwilsdon

This comment has been minimized.

Copy link

jackwilsdon commented Mar 1, 2018

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

@mrharel

This comment has been minimized.

Copy link

mrharel commented Mar 6, 2018

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

This comment has been minimized.

Copy link

julioe commented Mar 12, 2018

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

@arapocket

This comment has been minimized.

Copy link

arapocket commented Mar 20, 2018

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

@MaxInMoon

This comment has been minimized.

Copy link

MaxInMoon commented Mar 23, 2018

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

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

@alainib

This comment has been minimized.

Copy link

alainib commented Apr 4, 2018

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

This comment has been minimized.

Copy link

hery commented Apr 6, 2018

@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

This comment has been minimized.

Copy link

rayronvictor commented Apr 8, 2018

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

@zouyan532

This comment has been minimized.

Copy link

zouyan532 commented Apr 11, 2018

Thanks @akash-cp it worked!

@AyubaMakoa

This comment has been minimized.

Copy link

AyubaMakoa commented Apr 22, 2018

rayronvictor style solved my problem too.

@roadev

This comment has been minimized.

Copy link

roadev commented Apr 23, 2018

disabling the CORS plugin in chrome made it work!

@HFmoney

This comment has been minimized.

Copy link

HFmoney commented Apr 26, 2018

@roadev how to disabling the CORS plugin? thanks.

@roadev

This comment has been minimized.

Copy link

roadev commented Apr 26, 2018

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

@arfa123

This comment has been minimized.

Copy link

arfa123 commented May 2, 2018

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

This comment has been minimized.

Copy link

letanthang commented May 8, 2018

@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

This comment has been minimized.

Copy link

zhcsyncer commented May 9, 2018

If you also use Webstorm, you can do this.

image

@efleurine

This comment has been minimized.

Copy link

efleurine commented May 12, 2018

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

@0xc0d3r

This comment has been minimized.

Copy link

0xc0d3r commented May 16, 2018

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

This comment has been minimized.

Copy link

bsbechtel commented May 27, 2018

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

This comment has been minimized.

Copy link

HelpPal commented Jun 6, 2018

didn't work for me.

@erdemoflaz

This comment has been minimized.

Copy link

erdemoflaz commented Jun 9, 2018

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

@crazy4groovy

This comment has been minimized.

Copy link

crazy4groovy commented Sep 13, 2018

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

@yusufdonmez

This comment has been minimized.

Copy link

yusufdonmez commented Nov 22, 2018

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

This comment has been minimized.

Copy link

jerryheir commented Dec 19, 2018

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

This comment has been minimized.

Copy link

naytun commented Jan 1, 2019

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

@facebook facebook locked as resolved and limited conversation to collaborators Feb 7, 2019

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.