启用远程调试 JS 后，无法在 React-Native 应用程序上向 API 发出请求

Posted 2023-02-27

【中文标题】启用远程调试 JS 后，无法在 React-Native 应用程序上向 API 发出请求

【英文标题】：Can't make request to API on React-Native app when Debug JS Remotely is enabled

【发布时间】：2017-04-25 02:03:50

【问题描述】：

我目前正在开发一个 React-Native 移动应用程序。

使用fetch 对服务器 API 的请求工作正常，但是当我使用 Google Chrome 打开“远程调试 JS”时，它会创建某种 localhost 服务器并从中进行调用，我得到以下信息来自服务器 API 的错误：

XMLHttpRequest 无法加载 https://my.server.com/data。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin 'http://localhost:8081' 因此不允许访问。

在调试模式下无法跟踪对服务器的请求非常烦人。

你们中的任何人都遇到过类似的问题，你们有办法解决吗？

谢谢

【问题讨论】：

这个问题的任何具体解决方案，我仍然只面临 ios 的问题，

【参考方案1】：

其实我找到了解决办法：我安装了Chrome扩展Allow-Control-Allow-Origin:* https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

【讨论】：

除了添加扩展，是否需要配置一些设置

【参考方案2】：

对于 react-native，将您在 chrome 中的调试 url http://localhost:8081/debugger-ui/ 更改为 http://192.168.xxx.xx.xip.io:8081/debugger-ui/

例如：http://192.168.10.112.xx.xip.io:8081/debugger-ui/

或

添加

mres.setHeader('Access-Control-Allow-Origin', '*');

到

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