I’m new to Expo and React Native. I’ve created a new project in XDE (Version 2.22.1) on Mac (High Sierra) and opened the Android Emulator (Nexus 6, Android 7.0 x86) from Android Studio. XDE packager is set to “Host > Tunnel” and “Development Mode”. I then click “Open on Android” and the bundle is built. Once it opens, I hit CMD-M and select “Remote JS Debugging”. Chrome (Version 63.0.3239.132 (Official Build) (64-bit)). In the console, I receive this error:
Failed to load http://packager.es-av8.myusername.react-temp.exp.direct/node_modules/expo/AppEntry.delta?platform=android&dev=true&strict=false&minify=false&hot=false&assetPlugin=/Volumes/Storage/Apps/projects/react-temp/node_modules/expo/tools/hashAssetFiles: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:19003' 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
async function (async)
ws.onmessage @ (index):155
deltaUrlToBlobUrl.js:31 Fetch failed loading: GET "http://packager.es-av8.myusername.react-temp.exp.direct/node_modules/expo/AppEntry.delta?platform=android&dev=true&strict=false&minify=false&hot=false&assetPlugin=/Volumes/Storage/Apps/projects/react-temp/node_modules/expo/tools/hashAssetFiles".
deltaUrlToBlobUrl @ deltaUrlToBlobUrl.js:31
getBlobUrl @ (index):209
ws.onmessage @ (index):184
Please let me know how I can get Remote Debugging to work in Chrome. Any help would be greatly appreciated.
I don’t know if this helps but when I have Remote JS Debugging enabled, the app never seems to load. When I disable it, I see “Open up App.js to start working on your app!”
thanks for letting me know. i will investigate, until then you can continue using it without remote js debugging or only use remote js debugging through a simulator
I saw this for the first time today, as well. The app froze at “Downloading 100%” and I got this error in the Chrome devtools console. I’m running my app from the iOS Simulator. It is only happening on a new app I created this morning from exp init (“blank” template), and isn’t happening from my existing app.
Really pleased to see I’m not alone in getting this error. I’m just starting to learn this stuff and naturally presume that it’s something stupid that I’m doing that creates it. Thankfully it seems that this time, that’s not the case.
Failed to load http://10.10.8.61:19001/node_modules/react-native-scripts/build/bin/crna-entry.delta?platform=android&dev=true&minify=false&hot=false&assetPlugin=C:\Development\inside-track\inside-track-mobile-app\node_modules\expo\tools\hashAssetFiles: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:19001' 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.
and
(index):188 Uncaught (in promise) TypeError: Failed to fetch
async function (async)
ws.onmessage @ (index):155
Showing up in DevTools - app screen is just blank if I have remote debugging enabled.
@dalefrench this is a CORS issue. Chrome automatically prevents Cross Origin Resource Sharing. the only fix for this that i’ve found was this chrome extension called “Allow-Control-Allow-Origin”.
Sadly, usage of this extension seems to break some things that come from normal browsing, so you will have to switch it on and off as you switch from browsing to developing.
This tends to only happen on physical devices, if it does happen in a simulator, you should just be able to clean the project and restart the sim without closing the debugger tab.
If someone finds a better solution around CORS. That would be immensely helpful for those of us that prefer testing with hardware
I tried it previously, but found that it, for some reason, changed axios.get() and .post() to OPTIONS when received by servers. I also received two errors in console:
Refused to set unsafe header "connection"
Refused to set unsafe header "proxy-connection"
As @saulgarza stated, it’s isn’t an optimal solution. Debugging in Firefox produces the same errors as Chrome, so it’s not specific to a browser.
