获取 API 不适用于 localhost/127.0.0.1

IT技术 reactjs amazon-ec2 fetch
2021-04-29 13:40:18

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

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

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

在控制台中,从 Chrome 和 Firefox,我得到:

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

当我替换localhost127.0.0.1.

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

在后一种情况下,我还可以看到服务器记录了 OPTIONS 和 GET 的传入请求(在前一种情况下,两种方法都不存在日志)。

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

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

3个回答

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

然后你可以编写像fetch('/api/todos').

他们在这里解释得很好

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

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

这是fetch方法的链接链接

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

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

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