在docker-compose环境中，CORS请求失败

Question

我希望弄清楚为什么在Firefox中运行的React应用程序中的API请求失败。

标题如下：

Accept  */*
Accept-Encoding gzip, deflate
Accept-Language en-US,en;q=0.5
Connection  keep-alive
DNT 1
Host    backend:8080
origin  http://localhost:3000
Referer http://localhost:3000/
User-Agent  Mozilla/5.0 ...

在Chrome上，不透明的消息表明某种网络错误：

request.js?176a:41 GET http://backend:8080/api/foobar/ 
net::ERR_NAME_NOT_RESOLVED

在Firefox上，似乎还有更多信息：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://backend:8080/api/foobar/. (Reason: CORS request did not succeed).

---

我有一个由两个相关节点frontend和backend组成的环境。 frontend正在运行托管React frontend位的服务器。 backend是Flask应用，提供了一组简单的JSON API。目的是让frontend通过JSON API调用backend。

docker-compose配置使它们在同一逻辑网络上运行。最初，我怀疑这个问题是docker-compose问题，也许是一些DNS事故。但是，通过手动停止frontend节点并手动将同一容器重新连接到网络，我能够排除这种情况，因此我可以运行bash shell并ping backend主办。此外，我还可以通过curl从backend获取相同的位。因此，这不属于Docker网络问题（我认为）。

下一个逻辑元凶与CORS有关。 frontend请求到达了一个不同的域（例如backend），因此可以解释该行为。

在docs listed in the dev console of Firefox之后，声称发生了“某种基本网络错误”。

出于良好的考虑，我在backend上设置了Flask-CORS，并验证了正确的标头正在从服务器中继。确切地说，Access-Control-Allow-Origin: *。

但是，从backend服务器的日志来看，仍然没有新的网络请求。我已经推测，根据Mozilla CORS Docs中描述的特殊情况，也许有一个OPTION请求被向backend触发，但是失败了。但这至少会触发Flask控制台输出中的日志条目，表明已触发OPTION请求。为了沉迷于妄想症，我什至爆发了Wireshark。甚至没有从Firefox（或Chrome）发出任何相关的网络请求！

奇怪的是，我为此感到复杂，这很简单。但是会喜欢一些朝着正确方向发展的指针。

Answer 1

TLDR-JavaScript在浏览器中运行（例如后端开发人员）

在frontend上引用的主机应为localhost，因为backend端口是通过Docker在localhost上公开的。 frontend代码正在浏览器中运行（而不是仅在容器中运行）。容器只是一个处理这些位的过程。

不透明的网络错误很可能是由于引用主机网络不存在的域名导致的。因为它是docker-compose虚拟网络的一部分。