CORS和同源策略在反应捆绑应用

Question

好吧，我试图部署与webpack和create-react-app捆绑在一起的应用，这里的理论很简单：

我正在使用环境变量进行某些操作，但简而言之，development我们使用http://theapp.app.com/api/v3/endpoint这样的网址，它可以正常工作。

在production模式（yarn build）中，网址为http://localhost/api/v3/endpoint，有唯一的更改。

无论如何，我正在使用fetch API来发出请求，而我正在使用fetch配置的mode。对于development它是mode: 'cors'，因为服务器不在我的本地计算机上，而且运行正常。

在production标志的情况下，我尝试使用mode: 'same-origin'和cors，但我分别按顺序得到了这两个错误：

• 生产中启用了同源

• 在生产中启用了cors

之前的一些声明：

1. 是的，API应用和捆绑包由同一台服务器/机器提供服务。

2. 是的，我们在服务器上配置了CORS（我们使用的是python瓶）：

   @app.hook('after_request') def enable_cors(): response.headers['Access-Control-Allow-Origin'] = '*' response.headers['Access-Control-Allow-Headers'] = 'Origin, X-Requested-With, Content-Type, Accept' response.headers['Access-Control-Allow-Methods'] = 'GET, POST, OPTIONS'

3. 是的，我知道请求来源网址在same-origin政策中不相同，但启用了cors它也会爆炸，http://data.blabla是来自直接服务器的网址。 ......我只是不知道该怎么做。

有什么想法吗？我（遗憾地）有几个小时被困在这里。

Answer 1

在服务器端访问localhost没问题，因为它会指向同一台服务器。但是，如果您尝试在客户端执行此操作，http://localhost将指向同一个客户端。如果在浏览器中运行的Javascript正在请求来自http://localhost的内容，则您尝试与浏览器的计算机进行通信，而不是与Web应用程序的主机进行通信。 我甚至没有想到你没有意识到这一点。

当您说API在localhost时，我认为此应用程序仅用于已经运行API服务器的客户端。

如果外面的人应该使用这个应用程序，那么API也必须公开。如果要隐藏不安全的API，则必须实现暴露但安全的中间API。或者，您知道，保护实际的API：）