CORS：对本地主机的 http 请求被 react-native 拒绝答案

【问题标题】：CORS: http requests to localhost denied with react-nativeCORS：对本地主机的 http 请求被 react-native 拒绝
【发布时间】：2017-08-05 08:28:33
【问题描述】：

我有一个 Express.js 服务器，它支持在端口 8080 上运行的 CORS 标头，并且我试图从 iPhone 5 上的 React Native 应用程序向该端口发出 http 请求，但出现以下错误：

[Error: Request has been terminated
Possible causes: the network is offline, Origin is not allowed by Access-Control-Allow-Origin, the page is being unloaded, etc.]

请求如下所示：

import request from 'superagent'

const getMarkers = (url, callback) => {
  request
    .get(url)
    .set('Accept', 'application/json')
    .end(callback)
}

getMarkers('localhost:8080/markers, this.handleMarkers)

我的 Express 中间件如下所示：

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept')
  next()
})

我的项目允许“任意加载”。

当我使用 ios Simulator 时，这些请求运行良好。此外，当我下载 ngrok，在我的 express 服务器目录中运行它，并向 ngrok 提供的 https 地址发出客户端请求时，这些请求运行良好。

我的问题是：如何在不使用 ngrok 之类的东西的情况下促进这些请求？如果可能的话，我希望能够仅使用 http 和 localhost 快速开发。对于其他人可以就这个问题提供的任何见解，我将不胜感激！

【问题讨论】：

标签： ios xcode http https react-native

【解决方案1】：

我相信这是你的问题：

App Transport Security 是 iOS 9 中添加的一项安全功能，可拒绝所有未通过 HTTPS 发送的 HTTP 请求。这可能会导致 HTTP 流量被阻止，包括开发人员 React Native 服务器。

在使用 React Native CLI 生成的项目中默认禁用 ATS，以简化开发。您应该在构建应用程序之前重新启用 ATS，方法是从 ios/ 文件夹中的 Info.plist 文件中删除 NSAllowsArbitraryLoads 条目。

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
    <key>NSExceptionDomains</key>
    <dict>
        <key>**YOUR DOMAIN HERE**</key>
        <dict>
            <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>

【讨论】：

感谢@MattAft。不过我很困惑——我认为设置允许任意加载为真将允许我发出 http 请求，这正是我想要的。我弄错了吗？
是的，你会想要打开它以允许它。但是您必须设置您希望它工作的域。我会用我所做的来更新我的答案以使其发挥作用。
太棒了，谢谢。我也有同样的情况，<key>localhost</key>，但我仍然无法向 localhost 发出 http 请求。你知道我还能尝试什么吗？
我那里没有本地主机，我认为设备不了解本地主机是什么存在一些问题，这就是它在模拟器上正常工作的原因。尝试输入您的 IP 地址。
嗯，您指定了您的公共 IP，并且可以向传统上被防火墙阻止的端口发出请求？如果我运行 ifconfig | grep broadcast 并将我的 IP 从该调用放入 <key> 然后向 1.2.3.4:8080 发出请求，其中 1.2.3.4 是我的 IP，我的请求仍然被拒绝并出现上述错误

【解决方案2】：

如果这是一个错误，这里有一些我发现有帮助的工作：

对于快递应用：
-尝试显式添加 http 标头："X-Requested-With": "XMLHttpRequest"
-我有时需要将我的服务器设置在 IP 0.0.0.0 而不是 127.0.0.1 上运行

对于 react-native 应用程序：
-我有过在发出请求时需要使用 127.0.0.1 或特定主机名的经验（与使用 localhost 相比）。

【讨论】：