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：否＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。起源＆＃39; http://localhost:8081＆＃39;因此不允许访问。如果不透明的回复符合您的需求，请将请求的模式设置为“无人”状态。在禁用CORS的情况下获取资源。（index）：188 Uncaught（in promise）TypeError：无法获取

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

Answer 1

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

or

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

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);

Answer 2

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

Answer 3

只需添加一下，如果有人在iOS上进行开发，则可以在Android上进行开发（反之亦然）。

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

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

React-native JS Debugger问题与CORS - iOS

3 个答案: