React-native JS Debugger issues with CORS — iOS

2020-02-25 23:22发布

I am having an issue with the react-native JS debugger on the iOS. The error occurs when I try to debug my app using the JS Debugger tool. I tried different solutions around the web with no success. Has anyone come across this error and managed to fix it?

Replication:

1) Run development app on real iOS device, which loads the JS bundle from http://172.16.23.27.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://172.16.23.27.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

"react": "16.2.0",
"react-native": "0.52.1"

3条回答
forever°为你锁心
2楼-- · 2020-02-26 00:08

Just to add to this, if anyone is doing development on iOS then Android (or vice versa)..

If you get this message and it WAS working before; for example, I was working with an iOS project, then closed my Metro Bundler, opened cmd and built for Android. My debugger worked before with my Android project, but after this process I received the CORS issue.

Just close down the debugger tab in Chrome and open up again in the React-Native Dev Menu. Rebuild the project and hey presto! If you're in the situation where it did work, then this may the approach for you also.

查看更多
放荡不羁爱自由
3楼-- · 2020-02-26 00:09

Try to use http://172.16.23.27.xip.io:8081/debugger-ui/ for debug.

or

  1. open /node_modules/metro/src/Server\index.js

  2. find _processDeltaRequest

      mres.setHeader(FILES_CHANGED_COUNT_HEADER, String(output.numModifiedFiles));
      mres.setHeader('Content-Type', 'application/javascript');
      mres.setHeader('Content-Length', String(Buffer.byteLength(output.bundle)));
    + mres.setHeader('Access-Control-Allow-Origin', '*');
      mres.end(output.bundle);
    
查看更多
萌系小妹纸
4楼-- · 2020-02-26 00:19

Install Allow-Control-Allow-Origin: * chrome extension. It adds CROS to response header.

查看更多
登录 后发表回答