使用 CORS 的 React-native JS 调试器问题 - iOS

Posted 2023-02-19

【中文标题】使用 CORS 的 React-native JS 调试器问题 - iOS

【英文标题】：React-native JS Debugger issues with CORS — iOS

【发布时间】：2018-07-04 20:35:29

【问题描述】：

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"

【问题讨论】：

你试过这个 chrome 扩展吗？ chrome.google.com/webstore/detail/allow-control-allow-origi/… 它会自动将 CORS 添加到响应头中。

@robi 谢谢。我相信这已经解决了这个问题。

【参考方案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);

【讨论】：

太棒了，这行得通！只是给其他人的一个注释 - 你必须重新启动你的打包器

这个修复确实帮助我让我的应用程序再次运行。它应该得到更多的支持。我在 Exp27 上，在应用上述修复之前远程调试不起作用。

谢谢！接受的解决方案仅适用于 Chrome，这应该是接受的解决方案。

根据选项 2 编辑 Metro 服务器是唯一对我有用的方法。

这在 Expo 32.0.0 中不存在

【参考方案2】：

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

【讨论】：

我安装了这个，但没有任何区别。当我在 Chrome 调试器中使用 Network 选项卡进行检查时，我没有看到任何 Allow-Control-... 标头。

下面来自 JRK 的非常简单的修复为我解决了这个问题。你不需要这个 chrome 扩展。

这不是一个解决方案，它在其他浏览器中不起作用。使用http://IP_HERE:8081/debugger_ui/ 是我的解决方案。

【参考方案3】：

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

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

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

【讨论】：

我在发布我的问题后找到了这个答案。这绝对可以解决问题。我注意到，地址现在不是通常的 localhost:8081/debugger-ui，而是我的本地 ip 地址：8081/debugger-ui。感谢您发布此信息！