React-native JS Debugger问题与CORS - iOS

Question

我在iOS上遇到了react-native JS调试器的问题.当我尝试使用JS Debugger工具调试我的应用程序时发生错误.我在网上尝试了不同的解决方案但没有成功.有没有人遇到过这个错误并设法修复它？

复制:

1)在真实的iOS设备上运行开发应用程序,从http://172.16.23.27.xip.io:8081/index.delta?platform=ios&dev=true&minify=false加载JS包

2)启用JS Remote调试工具,在Chrome中打开http:// localhost:8081/debugger-ui /.

3)捆绑重新加载,Chrome DevTools控制台显示以下错误:

无法加载http://172.16.23.27.xip.io:8081/index.delta?platform=ios&dev=true&minify=false:请求的资源上没有"Access-Control-Allow-Origin"标头.因此不允许来源' http:// localhost:8081 '访问.如果不透明响应满足您的需求,请将请求的模式设置为"no-cors"以获取禁用CORS的资源.(索引):188 Uncaught(in promise)TypeError:无法获取

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

Answer 1

尝试http://172.16.23.27.xip.io:8081/debugger-ui/用于调试。

要么

1. 打开 /node_modules/metro/src/Server\index.js

2. 找 _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);
   

Answer 2

安装Allow-Control-Allow-Origin:* chrome扩展.它将CROS添加到响应头.

Answer 3

补充一点，如果有人在iOS上进行开发，那么Android（反之亦然）。

如果您收到此消息，并且之前可以正常工作；例如，我当时在处理一个iOS项目，然后关闭我的Metro Bundler，打开cmd并为Android构建。我的调试器之前曾与我的Android项目一起使用，但在此过程之后，我收到了CORS问题。

只需关闭Chrome中的调试器标签，然后在React-Native Dev Menu中再次打开即可。重建项目，嘿！如果您确实处于工作状态，那么这也可能适合您。