获取 API 不适用于 localhost/127.0.0.1

Question

作为背景，我有一个位于远程 EC2 Ubuntu 实例上的 React 应用程序。同一台服务器还运行一个监听端口 8080 的 Go 应用程序（端口已从安全设置中向所有人开放）。

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

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

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

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

当我用 127.0.0.1 替换 localhost 时也是如此。

然而，使用 EC2 实例的外部 IP 是可行的（并触发 CORS 请求 - 由于 'Authorization' header - 由服务器顺利处理）。

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

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

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

Answer 1

当您编写 localhost 时，它会调用您的 (localhost) 机器（浏览器所在的机器），因为 js 代码在您的浏览器中是运行。

您应该为您的 API 端点创建一个 domain/sub-domain 并使用它代替 localhost 或继续使用硬编码的 IP 地址。

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

Answer 2

如果您尝试向 localhost 发送请求，并且您在 localhost 上托管您的服务器，那么您不需要指定 url，您只需要告诉 fetch() 你的道路。

比如我的api终点是http://localhost:8082/api/config，那我就fetch('/api/config').

这里有一个link到fetch的方法，link

Answer 3

我刚遇到同样的问题。我设法通过将 "proxy": "http://localhost:4000" 添加到 package.json.

来实现这一点

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

他们解释得很好here。

获取 API 不适用于 localhost/127.0.0.1

Fetch API not working with localhost/127.0.0.1

amazon-ec2

fetch

reactjs