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

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 上，一条不透明的消息表明某种网络（ish）错误：

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正在运行托管 Reactfrontend位的服务器。backend是一个 Flask 应用程序，提供一组简单的 JSON API。目的是通过 JSON APIfrontend进行调用backend。

该docker-compose配置是这样的，他们是同一个逻辑网络上运行。起初，我怀疑这个问题是一个docker-compose问题，也许是一些 DNS 事故。但是，我可以通过手动停止frontend节点并手动将同一容器重新连接到网络来排除这种情况，这样我就可以运行bashshell 并 pingbackend主机。此外，我能够通过curl从backend. 所以这排除了它是 Docker 网络问题（我认为）。

下一个合乎逻辑的罪魁祸首与 CORS 有关。该frontend请求正在击中一个不同的域，（例如backend）所以这可以解释行为。

按照Firefox 开发控制台中列出的文档，声称发生了“某种基本网络错误”。

为了更好地衡量，我在服务器上设置了Flask-CORSbackend并验证了正确的标头正在从服务器中继。准确地说，Access-Control-Allow-Origin: *。

然而，从backend服务器的日志来看- 仍然没有新的网络请求被发出。我曾推测，可能是OPTION根据Mozilla CORS Docs 中backend描述的特殊情况发出了一个请求，但失败了。然而，这至少会在 Flask 控制台输出中触发一个日志条目，表明请求已被触发。为了放纵我的偏执狂，我什至爆发了 Wireshark。Firefox（或 Chrome）甚至似乎都没有发出任何相关的网络请求！OPTION

很可能我把这件事复杂化了，这是一件非常简单的事情。但是会喜欢一些指向正确方向的指针。

Answer 1

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

上引用的主机frontend应该是通过 Docker公开localhost的backend端口localhost。并且frontend代码在浏览器中运行（而不是专门在容器中）。容器只是一个提供这些位的过程。

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