React-native JS 调试器与 CORS 的问题 — iOS

Question

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

复制：

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

加载 JS 包

2) 启用 JS Remote 调试工具，这会在 Chrome.

3) 重新加载包，Chrome DevTools 控制台显示以下错误：

加载失败 http://172.16.23.27.xip.io:8081/index.delta?platform=ios&dev=true&minify=false: 请求的资源上不存在 'Access-Control-Allow-Origin' header。因此不允许访问来源'http://localhost:8081'。如果不透明响应满足您的需求，请将请求的模式设置为 'no-cors' 以在禁用 CORS 的情况下获取资源。 (index):188 Uncaught (in promise) TypeError: Failed to fetch

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

Answer 1

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

或

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

找到_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 添加到响应 header.

Answer 3

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

如果您收到这条消息并且它之前是有效的；例如，我正在处理一个 iOS 项目，然后关闭我的 Metro Bundler，打开 cmd 并为 Android 构建。我的调试器之前与我的 Android 项目一起工作，但在这个过程之后我收到了 CORS 问题。

只需关闭 Chrome 中的调试器选项卡，然后在 React-Native 开发菜单中再次打开。重建项目，嘿！如果您处于它确实有效的情况下，那么这也可能适合您。

React-native JS 调试器与 CORS 的问题 — iOS

React-native JS Debugger issues with CORS — iOS

remote-debugging

localhost

react-native