Reactjs 获取API不适用于localhost/127.0.0.1

作为背景，我在远程EC2 Ubuntu实例上安装了一个react应用程序。同一服务器还运行一个Go应用程序，监听端口8080（该端口已从安全设置向所有人打开）

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

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

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

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

当我用

127.0.0.1

替换

localhost

时也是如此

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

在后一种情况下，我还可以看到服务器记录两个选项和GET的传入请求（在前一种情况下，两种方法都不存在日志）

我还尝试了从EC2机器到

localhost

的卷曲，请求有效地通过了，这让我认为使用fetchAPI根本不会触发请求

---

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

当您编写

localhost

时，它会调用您的（localhost）计算机（存在浏览器），因为

js

代码正在您的浏览器中运行

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

---

您还应该只允许您的前端网站域位于后端允许的来源中。例如，您的网站可以是

www.example.com

，后端url可以是

www.api.example.com

。您应该只允许

www.example.com

作为

origin

，它可以通过

www.api.example.com

提供服务。您需要在后端对此进行配置。

如果您试图向localhost发送请求，并且您正在localhost上托管服务器，则不需要指定url，只需告诉

fetch（）

您的路径即可

例如，我的api端点是

http://localhost:8082/api/config

，然后我将执行

获取（'/api/config'）

---

这里有一个到

fetch

方法的链接，

我刚才遇到了同样的问题。我通过添加

“代理”成功地实现了这一点：http://localhost:4000“

到

package.json

然后您可以编写请求，比如

fetch（'/api/todos'）

---

他们解释得很好。

您在浏览器中使用哪个url来打开页面（执行实际的获取请求）？我使用的是EC2实例的外部IP地址（端口80），即成功获取请求所指向的IP地址。谢谢，这很有意义。虽然这可能更适合我想问的另一个问题，但如果可能的话，您如何在本地开发机器（使用localhost）和远程生产机器（不能使用localhost）之间保持相同的配置呢？我使用两种环境。基本上保留一个

webkpack.config.js

和

webpack.config.prod.js

。并在webpack中使用DefinePlugin定义您的后端子域。在

prod

config中，使用子域，在dev config中，使用localhost。另外，我允许所有的源代码在我的后端开发模式。太好了！这正是我所希望的。这不是答案。问题是如何使它与本地主机配合使用以进行本地开发，而不是如何以最明显的方式规避此问题。请记住重新启动服务器！