托管在同一台服务器上的 Django 和 React 的 CORS 问题

Posted 2023-02-24

【中文标题】托管在同一台服务器上的 Django 和 React 的 CORS 问题

【英文标题】：CORS issue with Django and React hosted on same server

【发布时间】：2019-06-19 16:11:04

【问题描述】：

我的 Django Rest Framework 和 React 应用程序在同一台服务器上存在 CORS 问题。我正在运行带有 Ubuntu 18 机器并安装了 nginx 的 Vagrant（我假设这个问题将转化为 DigitalOcean）如果我提供了太多信息，我提前道歉。 DRF 正在使用 Supervisor，而 Gunicorn 在端口 8000 上。我使用 create-react-app 创建了我的 React 应用程序。然后我使用npm run build 创建静态文件。

NGINX 设置：

反应会议

server 
    listen 8080;
    server_name sandbox.dev;

    root /var/sites/sandbox/frontend/build;
    index index.html;
    client_max_body_size 4G;
    location / 
        try_files $uri $uri/ /index.html;
    

Django 会议

upstream sandbox_server 
    server unix:/var/tmp/gunicorn_sanbox.sock fail_timeout=0;

server 
    listen 8000;
    server_name api.sandbox.dev;
    ...
    location / 
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
    if (!-f $request_filename) 
        proxy_pass http://sandbox_server;
        break;
    

Django 设置：

INSTALLED_APPS = [
    ...
    'rest_framework',
    'corsheaders',
    'myapp',
]
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ...
]

我尝试了以下没有运气

CORS_ORIGIN_ALLOW_ALL = True

和

CORS_ORIGIN_ALLOW_ALL = False
CORS_ORIGIN_WHITELIST = ('192.168.19.76:8080','localhost:8080',)

React App.js

...
fetch("http://localhost:8000/api/v1/token-auth/", 
    method: 'POST',
    headers: 
       'Content-Type': 'application/json',
    ,
    body: JSON.stringify("email":"[e-mail]", "password":"testuser"),
)

因此，要说明明显的 CORS 是正确的，因为 Origin 是 localhost:8080，这是一个不同的端口，因此它将其视为跨源。我已经尝试了 cors origin 允许的不同设置，但每次仍然是同一个问题。显然我做错了什么，但我看不到。

我的想法是

选项 1

proxy pass 使用 django nginx conf 文件并取消 react nginx conf 文件，但我不知道这可能会在生产中造成什么影响，或者这是否是个好主意。有没有更好的办法？

location /api 
    proxy_set_header X-Forwarded_for $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
    proxy_pass http://sandbox_server;

所以最后确定我的想法和我的问题。在尝试了 CORS 的不同 Django 选项后，我仍然收到 CORS 错误。为什么，是我的 NGINX conf 文件导致它还是其他原因？我会期望在 DigitalOcean 中看到这一点吗？

更新 1

我忘了添加错误。这是 CORS 错误

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8000/api/v1/token-auth/. (Reason: CORS request did not succeed).

对于那些想知道网络选项卡输出的人

Host    localhost:8000
Origin  http://192.168.19.76:8080
Pragma  no-cache
Referer http://192.168.19.76:8080/

更新 2 我确实使用 curl 进行了测试，一切都按预期返回，所以我知道 DRF 工作正常。

curl --data "email=[e-mail]&password=testuser" http://localhost:8000/api/v1/token-auth/

最终更新

感谢 paulsm4 提供的所有帮助和非常棒的体验。

所以，我确实放弃了 django-cors-headers 并推出了自己的。为了回答 paulsm4 的问题，我在 NGINX 文件中没有add_header 'Access-Control-Allow-Origin' '*';，尽管我确实考虑过让 NGINX 处理 CORS 与 Django，但从未走得那么远。 @paulsm4，这就是我所说的 proxy_pass。关键是将此代码块添加到 NGINX 中，以便与我的中间件一起使用。

    location /api 
        proxy_set_header X-Forwarded_For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_pass http://sandbox_server;

上面的代码本身就可以工作，但它不允许我将任何传入的 URL 列入白名单。创建我自己的中间件允许我加入白名单。我不知道为什么 django-cors-headers 甚至 django-cors-middleware 对我不起作用。奇怪的是，除了我所询问的 CORS 错误之外，这两个包的 fetch 从未达到足够远的程度来获取响应标头和任何类型的错误。使用我编写的中间件，fetch 能够完全调用，并返回一些响应头，无论是成功还是失败。

为了将来的参考，我可能会重新访问 NGINX 并允许它处理 CORS。这是一个很好的链接 CORS on NGINX

注意

澄清；除了 Django 已经包含的之外，唯一安装的中间件是 cors 中间件。 Django 和 React 都驻留在同一台服务器上，但使用不同的端口。

api.sandbox.com:8000 是 Django Rest 框架 app.sandbox.com:8080 是 React 静态文件 Django 2.0.2 Python 3.6 django-cors-headers 2.4.0 Vagrant/VirtualBox Ubuntu 18.04 NGINX

Django 设置.py

INSTALLED_APPS = [
    ...
    # Third Party
    'rest_framework',
    'corsheaders',
    # My Apps
    'account',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
    'django.middleware.csrf.CsrfViewMiddleware',
    'corsheaders.middleware.CorsPostCsrfMiddleware',
    ...
]
CORS_ORIGIN_WHITELIST = (
    'null',
    '192.168.19.76:8080',
    'localhost:8080',
    'app.sandbox.com:8080'
)

React App.js

    fetch("http://localhost:8000/api/v1/token-auth/", 
        method: 'POST',
        headers: 
            'Content-Type': 'application/json',
        ,
        body: JSON.stringify(
            "email": "[e-mail]", 
            "password": "testuser"
       ),
    )

所以我在这里束手无策。要么是 django-cors-headers 不起作用，要么可能是 NGINX。

【问题讨论】：

在 DigitalOcean 上会出现同样的问题吗？

问：您能否更新您的帖子，包括 1) 确切的错误消息，2) Django 实际返回的 HTTP 标头？另请参阅：django-cors-headers not work、Handling CORS in Django REST Framework 和 gist.github.com/Stanback/7145487。

@paulsm4 我更新了帖子以包含错误。抱歉，我完全忘了添加它。

@paulsm4 感谢您的链接。不幸的是，这些都在我最后在这里发布寻求帮助之前咨询过的链接列表中。

请使用 CORS.header 复制/粘贴响应标头。它可能看起来像这样：Access-Control-Allow-Origin: http://localhost:4200。如果你没有看到它......好吧，这就是问题所在；） 问：你的 8000 端口到底是什么？在你的 8080 端口上？

【参考方案1】：

我们一直在交换 cmets；这是我目前的理解：

问题：您有一个 Django 后端 API（在端口 8080 上）和一个 React 前端（在端口 8000 上）。两者目前都在 localhost 上运行，但最终将驻留在 DigitalOcean 上。 React 客户端收到Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8000/api/v1/token-auth/. (Reason: CORS request did not succeed).

您需要配置 CORS。

您捕获的 HTTP 流量中的请求标头清楚地表明这还没有发生。

一些相关链接包括：

django-cors-headers not work

Handling CORS in Django REST Framework

Djgano REST Framework: CORS

建议的下一步：

如果您还没有，请安装和配置django-cors-headers

【讨论】：

感谢您的帮助。如果您查看我在 Django Setup 下的原始帖子，您会看到我已经安装并配置了 django-cors-headers。这就是为什么我对它为什么不起作用感到困惑的原因。该版本是 django-cors-headers 的最新版本，即 2.4.0

问：运气好了吗？其他一切都失败了，我会 1) 专注于你的 API：Django 和 django-cors-headers，2) 打开最大跟踪/调试日志记录：chrisconlan.com/verbose-logging-output-in-django，3) 创建一个最小的 Django/React “hello world”尽可能使用中间件（理想情况下，仅从“django-cors-headers”开始）并一次添加一个内容，直到 CORS 再次“中断”（假设您可以在一开始就让它工作）。

不走运。是的，我正在一个骨架项目上运行，一切都至少。 django-cors-headers 绝对拒绝工作。

我在原帖中添加了一个注释，供尚未阅读的每个人阅读

拖动 - 听到这个我非常非常抱歉。建议：您是否考虑过编写自己的中间件来插入 django-cors-headers 无法为您完成的 Access-Control-Allow-Origin: http://app.sandbox.com:8080 HTTP 标头？看这里：djangobook.com/request-response-objects。据我所知，也许它就像 `response['Access-Control-Allow-Origin'] = 'app.sandbox.com:8080``...