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.