CORS请求在docker-compose环境中失败 [英] CORS request failing in docker-compose environment

问题描述

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

标题如下：

 接受* / * 
接受编码gzip，压缩
接受语言en-US，en; q = 0.5 
连接保持活动
 DNT 1 
主机后端：8080 
来源http：// localhost：3000 
推荐人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请求被阻止：相同来源策略不允许读取位于http：// backend：8080 / api / foobar /的远程资源。 （原因：CORS请求未成功）。 
  

---

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

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

下一个逻辑元凶与CORS有关。 前端请求正在访问一个不同的域（例如后端），因此可以解释该行为。

遵循

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

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

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

I'm hoping to figure out why an API request in a React application running in Firefox is failing.

Headers are as follows:

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 ...

On Chrome, an opaque message tells of some sort of network(ish) error:

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

On Firefox, there seems to be a bit more info:

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).

---

I have a environment composed of two relevant nodes, frontend and backend. frontend is running a server hosting the React frontend bits. backend is a Flask app providing a set of simple JSON APIs. The intent is for frontend to call backend via JSON APIs.

The docker-compose config is such that they're running on the same logical network. At first, I had suspected the issue was a docker-compose issue, and maybe some DNS mishap. However, I was able to exclude this case by manually stopping the frontend node, and manually re-attaching the same container to the network so I could run a bash shell and ping the backend host. Furthermore, I was able to fetch the same bits via curl from the backend. So this excludes it being a Docker networking issue (I think).

The next logical culprit is something to do with CORS. The frontend request is hitting a distinct domain, (e.g. backend) so this could explain the behavior.

Following the docs listed in the dev console of Firefox the claim is a "fundamental network error of some kind" occurred.

For good measure, I set up Flask-CORS on the backend and verified the right headers are being relayed from the server. To be precise, Access-Control-Allow-Origin: *.

Yet, from the logs of the backend server - there are still no new network requests being made. I had speculated that maybe there was an OPTION request being fired at the backend per the special case described in the Mozilla CORS Docs, and that was failing. Yet that would at least have triggered a log entry in the Flask console output indicating an OPTION request was fired. To indulge my paranoia I even broke out Wireshark. There doesn't even appear to be any relevant network requests being emitted from Firefox (nor Chrome) !

Odds are I am over complicating this, and it's something painfully simple. But would love some pointers in the right direction.

解决方案

TLDR - JavaScript runs in the browser (says the backend dev)

The host referred on the frontend should be localhost as the backend port is exposed on localhost via Docker. And the frontend code is running in the browser (as opposed to exclusively in the container). The container was just a process serving up those bits.

The opaque network error was likely a result of referring to a domain name that didn't exist to the host network. Because it was part of the docker-compose virtual network.

这篇关于CORS请求在docker-compose环境中失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！