原因：Django 中缺少 CORS 标头“Access-Control-Allow-Origin”错误

Question

我最近在 django 项目中遇到了 CORS 的困扰。我遵循了所有需要的步骤，例如安装 django-cors-headers，这是我的 settings.py:

INSTALLED_APPS = [
    'rest_framework', # dasti ezafe shod
    'rest_framework_simplejwt',
     'corsheaders',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'carat', # dasti ezafe shod
    'data',
    'price',
    'users',
    'marketplace'
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

CORS_ORIGIN_WHITELIST = (
    'https://example.com',
    'https://web.example.com',
)

我们构建 flutter Web 应用程序并部署在 web.mydomain.com 中。从一开始我就遇到了 CORS 错误，但是一旦我输入这些设置，除了一个错误之外，它们都消失了：

跨源请求被阻止：同源策略不允许读取 https://example.com/media/images/image0_WEEP09I.png 处的远程资源。 （原因：CORS 标头“Access-Control-Allow-Origin”丢失）。状态代码：200。 我在 Firefox 的检查器的控制台选项卡中看到此错误。

这是我的服务器响应的一部分：

HTTP/2 200 OK
Content-Type: application/json
Vary: Accept, origin,Accept-Encoding
Allow: GET, HEAD, OPTIONS
X-Frame-Options: DENY
X-Content-Type-Options: nosniff
Referrer-Policy: same-origin
Cross-Origin-Opener-Policy: same-origin
Access-Control-Allow-Origin: https://web.example.com
Access-Control-Allow-Credentials: true
Content-Length: 1884
Date: Sat, 03 Feb 2024 22:01:07 GMT
Alt-Svc: h3=":443"; ma=2592000, h3-29=":443"; ma=2592000, h3-Q050=":443"; ma=2592000, h3-Q046=":443"; ma=2592000, h3-Q043=":443"; ma=2592000, quic=":443"; ma=2592000; v="43,46

` 我真的很困惑，谁能指导我如何解决它？

我添加了这段代码：

def options(self, request):
        response = Response()
        response["Access-Control-Allow-Origin"] = "https://example.com"
        response["Access-Control-Allow-Methods"] = "GET, OPTIONS"
        response["Access-Control-Allow-Headers"] = "authorization"
        return response

在我的课堂上支持选项请求。

Answer 1

您应该提供来源列表而不是元组。另外CORS_ORIGIN_WHITELIST已被弃用，您应该使用CORS_ALLOWED_ORIGINS，如下所示：

CORS_ALLOWED_ORIGINS = [
    'https://example.com',
    'https://web.example.com',
]