React Native iOS端JS调试器CORS报错求助

兄弟，我之前在React Native 0.52.1版本的iOS真机上远程调试JS时，也碰到过一模一样的CORS问题！试了好几种方法，这几个方案亲测能解决，你可以挨个试试：

方案1：修改调试器的Fetch请求模式绕开CORS #

你的报错里已经提示了可以设置mode: 'no-cors'，我们直接改RN自带的调试器代码就行：

• 找到项目依赖里的文件：node_modules/react-native/local-cli/server/util/debugger.html
• 定位到报错的第188行左右的fetch请求代码，把它改成：

fetch(url, { mode: 'no-cors' })
  .then(response => response.text())
  .then(text => {
    // 这里保留原有处理bundle的逻辑
  })

• 重启RN开发服务器，再重新加载bundle调试，这个方法直接让请求跳过CORS检查，刚好满足调试时加载bundle的需求。

方案2：统一调试器和Bundle的访问域名 #

既然你的bundle是从172.16.23.27.xip.io:8081加载的，那我们让调试器也用这个域名打开，就不存在跨域了：

• 先不要在App里启用远程调试，手动在Chrome里打开地址：http://172.16.23.27.xip.io:8081/debugger-ui/
• 回到iOS App里，开启“Enable Remote JS Debugging”，此时调试器的Origin和Bundle地址完全一致，CORS限制自然就消失了。

方案3：用Charles代理改写请求头 #

如果不想改代码，还可以用Charles代理来“欺骗”服务器，让它认为请求是同源的：

• 打开Charles，把你的iOS设备的WiFi代理设置成电脑的IP和Charles的监听端口（默认8888）
• 在Charles里添加一个Rewrite规则：
  • 匹配条件：请求URL包含172.16.23.27.xip.io:8081
  • 改写动作：将请求头里的Origin字段从http://localhost:8081替换为http://172.16.23.27.xip.io:8081
• 保存规则后重新调试，服务器收到的请求Origin就和Bundle地址一致，不会触发CORS报错了。

内容的提问来源于stack exchange，提问作者Diego Oriani