Fetch API不能与localhost / 127.0.0.1一起使用

时间:2017-05-27 13:22:49

标签: reactjs amazon-ec2 cors fetch

就像背景一样,我有一个坐在远程EC2 Ubuntu实例上的反应应用程序。同一台服务器还运行一个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计算机到localhost的CURL,并且有效地通过该请求使我认为使用Fetch API时根本不会触发请求。

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

3 个答案:

答案 0 :(得分:3)

如果您尝试向localhost发送请求,并且您在localhost上托管服务器,则无需指定网址,只需告诉fetch()您的路径。

例如,我的api结束点是http://localhost:8082/api/config,然后我会fetch('/api/config')

以下是fetch方法link

的链接

答案 1 :(得分:3)

我只是遇到了同样的问题。我通过将"proxy": "http://localhost:4000"添加到package.json来使此工作正常进行。

然后,您可以编写诸如fetch('/api/todos')之类的请求。

他们解释得很好here

答案 2 :(得分:2)

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

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

您还应该只允许您的后端允许来源的前端网站域名。防爆。您的网站可以是www.example.com,后端网址可以是www.api.example.com。您应该只允许www.example.com作为originwww.api.example.com可以通过df = pandas.Series(numpy.random.randint(0,10,10), index=pandas.date_range('2020-01', periods=10)) df 2020-01-01 8 2020-01-02 4 2020-01-03 1 2020-01-04 0 2020-01-05 5 2020-01-06 8 2020-01-07 3 2020-01-08 8 2020-01-09 9 2020-01-10 0 Freq: D, dtype: int64 投放。您需要在后端配置它。