Failed to load 'http://<DEVICEIP>:8083/create_session'

[nitelight]

Goals

Identify and fix bug. Debug JS Remotely worked fine before adding Realm.

Expected Results

Not crash the app and still be able to Debug JS Remotely.

Actual Results

Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'http://localhost:8083/create_session'.

Steps to Reproduce

react-native init AwesomeProject yarn add realm Added "import Realm from 'realm';" to App.js react-native link realm

Install and run app on iOS device. Enable Debug JS Remotely.

Version of Realm and Tooling

• Realm JS SDK Version: 2.4.1
• Node or React Native: 0.54
• Client OS & Version: iOS 11.3.1
• Which debugger for React Native: Chrome 66.0.3359.139

[nitelight]

Tried again with Realm 2.2.10, and same issue occurs, which makes me think it may be caused by an update in Chrome.

[nitelight]

Definitely a CORS issue. In RealmReact.mm the Access-Control-Allow-Origin is set to allow traffic from "http://localhost:8081", but when the debugger launches in Chrome on my box the page loads as "http://[MY COMPUTER IP]:8081/".

To fix, the RPC server should allow requests from the computer running the development server, which may be loaded in chrome as localhost or the computer's ip.

A quick fix is to allow all CORS traffic (Access-Control-Allow-Origin: *), which at first thought seems acceptable for a little web server that only runs while a dev is debugging their app.

[kneth]

@nitelight Thanks for the investigation. I move it to the backlog but I can't say when we can get a fix for it. Of course, pull requests are welcome :smile:

[wszgxa]

same issue...

[zn7726]

same issue here ... Can't even run the 'number of dogs in realm' example listed on https://realm.io/docs/javascript/latest

[kneth]

@wszgxa @zn7726 Which version of Realm JS do you use?

[zn7726]

@kneth I am pretty sure I replied you last night at home but found my comment is gone this morning ... maybe I forgot something last night.

Anyway.

in my test I did "npm install --save realm" which pulled the latest realm and the version should be 2.8.1.

According to nitelight's comment above, I have managed to change the RealmReact.mm file and the dog app can run on my ipad mini with "Debug JS Remotely" enabled. Now both the standalone react devtools and chrome devtools can connect to the app.

[kneth]

@zn7726 Good to hear. What did you change in RealmReact.mm?

[zn7726]

@kneth Hi Kenneth, sorry about the late reply.

The change is pretty straightforward. Open the RealmReact.mm in XCode under Libraries->RealmReact.xcodeproj->RealmReact search for "Access-Control-Allow-Origin", which is the name of an additional header parameter to be set to server response, and set the value of this header to "" like `setValue:@""`

Save the change (CMD+S) and restart/rerun on device (CMD+R)

Hope that helps

[wszgxa]

I make it work by executing adb forward tcp:8083 tcp:8083 every time when you start app.

[zn7726]

@wszgxa I think we are talking about issues on IOS simulators/devices but, from my memory, adb command only relates to Android, maybe I am wrong?

With Android devices/simulators, you can easily specify in the debug menu, what's the IP/Port of the debugger but with IOS devices/simulators, you won't see such options.

[agates4]

@zn7726 this solution worked for me on iOS

[ethantran]

I have this problem on Android too. adb forward is not working.

[kneth]

@ethantran How do you connect your Android device to your computer?

[ethantran]

I connect using USB. I have a Samsung Galaxy S9 Android 8.0.0 and a Wise POS 2.0 Android 7.0.0 for work. Everything works without Debug JS Remotely. I've had to use Reactotron as an alternative to Debug JS Remotely.

[kneth]

@ethantran Forwarding didn't work on both devices? And it worked when you used Reactotron?

[ethantran]

@kneth Correct. I do have to do adb reverse tcp:9090 tcp:9090 for Reactotron to work as mentioned here. I am working under a corporate firewall and their self-signed certificates. I don't know if that should affect anything, but I will try this at home later to be sure.

[kneth]

@ethantran Do you use Expo? Expo doesn't have support for Realm.

[ethantran]

@kneth No. Normal RN app. Realm works fine when remote is off. I tried my home network and it still does not work. adb forward tcp:8083 tcp:8083 does not work. I see two create_session calls that fail in console. http://100.111.120.161:8083/create_session and http://10.148.199.185:8083/create_session

[kneth]

@ethantran If you are debugging over WiFi, did you do an adb connect before adb forward? (see also https://developer.android.com/studio/command-line/adb#wireless)

[lyseiha]

Still happen in Realm version 2.7.2

[kneth]

@lyseiha What is your set up?

[ma-pe]

I can confirm that @zn7726's solution also works for Android:

I had CORS issues when debugging an Android version on a real device.

There are two occurrences of Access-Control-Allow-Origin in RealmReactModule.java. Set the values to * instead of http://localhost:8081 resolves these issues.

[hcliff]

does anyone know how to get this fix to persist across pod installs? it's very frustrating

[macnibblet]

makeRequest
    86b8e1f1-138f-476d-ac04-00d9a1f6da37:84692:22
sendRequest
    86b8e1f1-138f-476d-ac04-00d9a1f6da37:84737:28
Object.createSession
    86b8e1f1-138f-476d-ac04-00d9a1f6da37:84472:21
<unknown>
    86b8e1f1-138f-476d-ac04-00d9a1f6da37:84156:45
loadModuleImplementation
    86b8e1f1-138f-476d-ac04-00d9a1f6da37:159:7
guardedLoadModule
    86b8e1f1-138f-476d-ac04-00d9a1f6da37:92:14
_require
    86b8e1f1-138f-476d-ac04-00d9a1f6da37:73:62
<unknown>
    86b8e1f1-138f-476d-ac04-00d9a1f6da37:83909:32
loadModuleImplementation
    86b8e1f1-138f-476d-ac04-00d9a1f6da37:159:7
guardedLoadModule
    86b8e1f1-138f-476d-ac04-00d9a1f6da37:92:14

Updated both iOS and Android libraries to reply with * as the Access-Control-Allow-Origin header. but still the same crap.

[fogzilla]

@nitelight pointed out correctly that it's a CORS problem yet almost one year later it hasn't been fixed

For Android: in file node_modules/realm/android/src/main/java/io/realm/react/RealmReactModule.java Search for DEFAULT_PORT = 8083 which sets the webserver's default port to 8083. Then seach for (two occurrences) response.addHeader("Access-Control-Allow-Origin", "http://localhost:8081") One sees that the allowed origin is set to port 8081, different than the default port of 8083. Change this to response.addHeader("Access-Control-Allow-Origin", "http://localhost:" + DEFAULT_PORT) Rebuilding by running react-native run-android then fixes the problem.

In ios the file to look at is node_modules/realm/react-native/ios/RealmReact/RealmReact.mm Change the line [response setValue:@"http://localhost:8081" forAdditionalHeader:@"Access-Control-Allow-Origin"];

@nitelight and @ma-pe already found the solution I'm just giving a more detailed description. @kneth This small bug in the code makes it impossible to debug any react native app that uses Realm. Since the fix is easy and doesn't affect other parts of Realm maybe it makes sense to incorporate it ASAP.

[bmunkholm]

@fogzilla Thanks a lot for the details. We did add the "Help wanted" tag to encourage others to contribute - we always are very appreciative for PRs :-)

[kkusanagi]

Hi, I had tried above and nothing helps.

Then i try solve with other method. If you see this when building successful with "react-native run-android"

adb server version (39) doesn't match this client (40); killing...

This may cause the problem above to occur after you update the adb version using Android Studio. Due to i had 2 different version of "adb" at /usr/local/bin/adb(ver 39) and ~/Library/Android/sdk/platform-tools/adb(ver 40)

I had to remove or replace both adb to be same version. so i run the command in my macbook to replace the old adb into new version.

cp ~/Library/Android/sdk/platform-tools/adb /usr/local/bin/adb

Then i try, re-run "react-native run-android" again and it work.

[kneth]

@kkusanagi Thanks for investigating it and figure out what is causing problems!

[kkusanagi]

@kneth Hi, I'm not sure this is the source of problem. Cause I'm also facing same problem while developing.

Just hope can help others as well.

[star-heng]

the other way: For Android: in file node_modules/realm/android/src/main/java/io/realm/react/RealmReactModule.java change

response.addHeader("Access-Control-Allow-Origin", "http://localhost:8081");

to

response.addHeader("Access-Control-Allow-Origin", "*");

[LuigiMaestrelli]

the other way: For Android: in file node_modules/realm/android/src/main/java/io/realm/react/RealmReactModule.java change

response.addHeader("Access-Control-Allow-Origin", "http://localhost:8081");

to

response.addHeader("Access-Control-Allow-Origin", "*");

That is not working. Any other possible workarounds?

I'm using react 16.8.6, react-native 0.59.9 and realm 2.28.1

[star-heng]

the other way: For Android: in file node_modules/realm/android/src/main/java/io/realm/react/RealmReactModule.java change

response.addHeader("Access-Control-Allow-Origin", "http://localhost:8081");

to

response.addHeader("Access-Control-Allow-Origin", "*");

That is not working. Any other possible workarounds?

I'm using react 16.8.6, react-native 0.59.9 and realm 2.28.1

[LuigiMaestrelli]

@star-heng I tried that and got the same error. debbuging on Android, the app breaks before hitting this function.

I also tried some of the comments on https://github.com/realm/realm-js/issues/465 https://github.com/realm/realm-js/issues/356 https://github.com/realm/realm-js/issues/1732

And got the same error.

[star-heng]

@LuigiMaestrelli I'm sorry. I'm using react 16.6.0, react-native 0.57.4 and realm 2.27.0-rc.3 and have a try this way ?

node_modules/metro/Server.js  &  Server.js.flow
 find this function
  _processDeltaRequest  
add  
 mres.setHeader("Access-Control-Allow-Origin", "*");

[LuigiMaestrelli]

Oww, that was fast. Thank you.

But it did not solve... :( Same error

[FansPro]

same error on android.

react-native: 0.59.8
 realm: 2.28.1

I just import Realm from "realm" and open chrome debug.

[kneth]

When debugging on Android, you will have to set up port forwarding using adb.

[LuigiMaestrelli]

@kneth

I tried forwarding 8083, 8082 and 8081 As described here and on other open issues related to this one.

[FansPro]

That I found Debugging on Android with Chrome. The error happened when I run on windows system. And Mac OS can fixed it.

[FansPro]

Update.

When you use an android simulator to debug with chrome, the android simulator's api version also case this problem. Becase when u build a simulator's with API Level 29, adb reverse tcp:8081 tcp:8081 will be invalid。

Solution

When u use an android simulator to debug and has this problem, u should check android simulator that u build. What API Level u choose, API Level 28 should work fine. And not need other operation.

[alvyn279]

@LuigiMaestrelli hi, any luck in finding a solution or workaround for this persistent problem?

[LuigiMaestrelli]

@alvyn279 No. Using realm on my project is on standby for now... 👎

[supermavericks]

Realm JS SDK Version: 2.29.0 React Native: 0.59.8 Android

same error after adb forward / change response.addHeader("Access-Control-Allow-Origin", "*");

[supermavericks]

I solved . See

2441

[LuigiMaestrelli]

@supermavericks Thanks, I will test it. Any ideas on how to solve for emulators too? :)

[ghost]

Any solutions for windows yet?

[lucasfcosta]

Hey everyone,

This seems to happen when you're running on bundler in a port other than 8081 and therefore the Access-Control-Allow-Origin headers don't match, since, in Realm, they're hard-coded to accept only requests coming from localhost:8081.

To fix this you can:

1. Create the following script which uses sed to replace the configuration within Realm's sources in node_modules to accept requests from any origin.

   #!/bin/bash
   
   darwin=false;
   case "`uname`" in
     Darwin*) darwin=true ;;
   esac
   
   if $darwin; then
     sedi="/usr/bin/sed -i ''"
   else
     sedi="sed -i"
   fi
   
   $sedi 's/"Access-Control-Allow-Origin", "http:\/\/localhost:8081"/"Access-Control-Allow-Origin", "*"/' ./node_modules/realm/android/src/main/java/io/realm/react/RealmReactModule.java
   $sedi 's/"http:\/\/localhost:8081"/"*"/' ./node_modules/realm/react-native/ios/RealmReact/RealmReact.mm

   The script above should work fine on both OSX and Linux machines. Make sure you have sed installed. Make sure you chmod +x ./this-script-name.sh so that you're able to run it. If you want, you can also set an environment variable and use it within the above script to replace the header's value with an exact address, like, for example localhost:9001, in case that's where you're running your bundler at. I just kept it simple and replaced it with *.

2. Add this to your postinstall script in package.json so that it will run your script whenever you install dependencies.

   {
       "name": "my-cool-rn-project",
       "version": "1.0.0",
       "scripts": {
           "start": "react-native start",
           "postinstall": "./script-name.sh"
       }
       // rest of package.json
   }

I'd also recommend removing the ^ on the package.json dependency so that you can pin it and avoid getting minor updates which may break this or cause unintended effects.

Core maintainers may want to make this header configurable and use an environment variable (if set) instead of hard-coding localhost:8081, but that's just a suggestion.

Best, Lucas

[kneth]

@lucasfcosta Thank you for a detailed comment.