docker 上的 React 应用程序中 nginx/django 的 Cors 问题

Question

我有一个关于 django 中 cors 实现的问题。设置正确的 cors 值时出现问题。我的部署是在docker上。我部署了 3 个容器：

• 后端：Django + DRF作为后端（暴露8000端口）
• Nginx为我的后端提供服务器（使用公开的 8000 端口并将其设置为 1338）
• 与 nginx 一起使用的前端React 应用程序（使用端口 1337）

一切都在本地主机上。我使用前端的 axios 来调用 get/post 请求。（我调用 1338 端口，然后我认为它被重定向到 8000 端口上的内部服务）对于后端，我必须安装 django-cors-headers 包才能使用 CORS。我想我设置正确。但有些情况下它不起作用。

在设置.py

INSTALLED_APPS = [
...
"corsheaders",
]
...
MIDDLEWARE = [
...
"corsheaders.middleware.CorsMiddleware",
"django.middleware.common.CommonMiddleware",
...
]

nginx 镜像的 Nginx.conf：

upstream backend {
    server backend:8000;
}

server {

    listen 80;

    add_header Access-Control-Allow-Origin *;

    

    location / {

        proxy_pass http://backend;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host:1337;
        proxy_redirect off;
    }

    location /static/ {
        alias /home/app/web/staticfiles/;
    }
}

第一个场景

在设置.py

CORS_ALLOW_ALL_ORIGINS = True

没有 get/post 请求工作。获取消息：
不允许 CORS 多源

第二种情况
在settings.py中

CORS_ALLOWED_ORIGINS = ["http://localhost:1337"]

适用于 get 请求，但不适用于 post 请求。

对于帖子请求：

• 出现错误的选项：CORS 缺少允许标头
• 发布错误：NS_ERROR_DOM_BAD_URI

如果我不使用 nginx 作为后端，它就可以工作。

按照评论中的要求添加请求标头。

我不确定我还能在这里添加什么。所以我部署的项目就在这里（如果你的机器上有docker，启动起来也很容易： https://gitlab.com/k.impolevicius/app-001

Answer 1

我不久前遇到过这个问题，我认为问题出在标题上。在 MDN 文档中，这里指出，除了简单请求之外，我们将使用OPTIONS方法获取预检请求。根据您的情况，我们需要发送 3 个主要标头作为响应

Access-Control-Allow-Origin: http://localhost:1337
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: Content-Type

从外观上看，您已经配置了第一个标头，您也应该在网络选项卡中看到它，并且由于错误是关于缺少允许标头，因此您需要将Access-Control-Allow-Methods标头添加到您的 nginx 文件中

add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

在请求的标头上查看网络选项卡将在此处提供更多上下文，通常您应该在请求中看到Access-Control-Request-Method和Access-Control-Request-Headers标头OPTIONS。如果有一些您不允许的标头，请为其编写一条 nginx 规则。您可以查看此解决方案以获取更多参考