使用 CORS 的 React-native JS 调试器问题 - 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 中打开 http://localhost:8081/debugger-ui/。

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

无法加载 http://172.16.23.27.xip.io:8081/index.delta?platform=ios&dev=true&minify=false：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin '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/进行调试。

或

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 开发菜单中再次打开。重建项目，嘿！如果您处于它确实有效的情况，那么这也可能适合您。