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

Posted 2023-03-04

【中文标题】docker-compose 环境中的 CORS 请求失败

【英文标题】：CORS request failing in docker-compose environment

【发布时间】：2019-04-24 15:12:35

【问题描述】：

我希望找出在 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 正在运行一个托管 React frontend 位的服务器。 backend 是一个提供一组简单 JSON API 的 Flask 应用程序。目的是让 frontend 通过 JSON API 调用 backend。

docker-compose 配置使得它们在同一个逻辑网络上运行。起初，我怀疑这个问题是 docker-compose 问题，可能是一些 DNS 事故。但是，我可以通过手动停止frontend 节点并手动将同一个容器重新附加到网络来排除这种情况，这样我就可以运行bash shell 并pingbackend 主机。此外，我能够通过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 中描述的特殊情况，可能在backend 处触发了OPTION 请求，但这是失败的。然而，这至少会在 Flask 控制台输出中触发一个日志条目，指示 OPTION 请求已被触发。为了放纵我的妄想症，我什至爆发了 Wireshark。 Firefox（或 Chrome）似乎没有发出任何相关的网络请求！

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

【参考方案1】：

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

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

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