获取 API 不适用于 localhost/127.0.0.1

Question

作为背景，我有一个反应应用程序坐在远程 EC2 Ubuntu 实例上。同一台服务器还运行一个在端口 8080 上侦听的 Go 应用程序（端口已通过安全设置向所有人开放）。

我正在尝试从 React 应用程序使用 Fetch API 发出请求，如下所示：

 var bearer = 'Bearer ...'
return fetch('http://localhost:8080/home', {
  headers: new Headers({
    'Authorization': bearer
  })
})

在控制台中，来自 Chrome 和 Firefox，我得到：

类型错误：尝试获取资源时出现网络错误

当我用 localhost 替换 --- 时 127.0.0.1 。

但是，使用 EC2 实例的外部 IP 可以工作（并触发 CORS 请求 - 由于“授权”标头 - 服务器可以顺利处理）。

在后一种情况下，我还可以看到服务器记录了 OPTIONS 和 GET 的传入请求（在前一种情况下，这两种方法都没有日志）。

我还尝试从 EC2 机器 CURL’ing 到 localhost 并且请求有效地通过，这让我认为使用 Fetch API 根本不会触发请求。

任何意见，将不胜感激。如果我做错了什么，请指出我正确的方向。

原文由 Andy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

当您编写 localhost 时，它会调用您的（本地主机）机器（存在浏览器），因为 js 代码正在您的浏览器中运行。

您应该为您的 API 端点创建一个域/子域并使用它而不是 localhost 或继续使用硬编码的 IP 地址。

您还应该在后端允许的来源中只允许您的前端网站域。前任。您的网站可以是 www.example.com 并且后端网址可以是 www.api.example.com 。您应该只允许 www.example.com 作为 origin 可以通过 www.api.example.com 提供服务。您需要在后端进行配置。

原文由 Rubbal 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我只是有同样的问题。我设法通过将 "proxy": "http://localhost:4000" 添加到 package.json 来使其工作。

然后你可以写像 fetch('/api/todos') 这样的请求。

他们 在这里 解释得很好。

原文由 Ankan 发布，翻译遵循 CC BY-SA 4.0 许可协议