提取API不适用于localhost / 127.0.0.1

Question

就像背景一样，我有一个坐在远程EC2 Ubuntu实例上的react应用。同一台服务器还运行一个Go应用程序，监听端口8080（已从“安全性”设置向所有人开放该端口）。

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

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

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

尝试获取资源时出现TypeError：NetworkError

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

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

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

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

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

Answer 1

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

例如，我的 api 端点是http://localhost:8082/api/config，那么我会做fetch('/api/config').

这是fetch方法的链接，链接

Answer 2

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

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

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

Answer 3

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

然后，您可以编写类似的请求fetch('/api/todos')。

他们在这里解释得很好。