Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

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
Enable JS Remote debug tools, which opens http://localhost:8081/debugger-ui/ in Chrome.
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

Issue Analytics

State:
Created 6 years ago
Reactions:49
Comments:75 (5 by maintainers)

Top GitHub Comments

163reactions

njbmartincommented, Jan 22, 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…

44reactions

Sw0rdstreamcommented, 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/

Top Results From Across the Web

React-native JS Debugger issues with CORS — iOS

The error occurs when I try to debug my app using the JS Debugger tool. I tried different solutions around the web with...

failed to fetch possible reasons cors swagger

We are currently using AWS API Gateway for managing our APIs, ... facebook/react-native0.52 - CORS issue with JS Remote Debugging when using xip.io#17618....

How to Deal With CORS

CORS can be one of the most frustrating things to debug when working with front-end code. This guide provide steps for determining if...

How to Debug Any CORS Error

CORS stops you from using the user's existing login session (their cookies and other cached authentication details) when communicating with other servers.

@react-native/eslint-plugin-specs | Yarn - Package Manager

React Native brings React's declarative UI framework to iOS and Android. With React Native, you use native UI controls and have full access...