请求的资源 Django 和 ReactJS 上不存在“Access-Control-Allow-Origin”标头

Posted 2023-03-03

【中文标题】请求的资源 Django 和 ReactJS 上不存在“Access-Control-Allow-Origin”标头

【英文标题】：No 'Access-Control-Allow-Origin' header is present on the requested resource Django and ReactJS

【发布时间】：2019-05-19 06:11:47

【问题描述】：

目前我有 Django 1.98 作为后端和 React 作为前端。

我收到此错误：

访问 XMLHttpRequest 在 'https://mywebsite:8000/uploads/vtt/' 来自原点 'http://localhost:3000' 已被 CORS 策略阻止：否 请求中存在“Access-Control-Allow-Origin”标头 资源。

我在我的虚拟环境中安装了 django-cors-headers==2.4.0

这是我的 settings.py 文件：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'uploads.core',
    'corsheaders',
]

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

CORS_ORIGIN_ALLOW_ALL = True

CSRF_TRUSTED_ORIGINS = ['http://127.0.0.1:3000','http://localhost:3000','http://localhost:8000','https://mywebsite:8000','https://myapp.firebaseapp.com','https://mywebsite:8088']
CSRF_COOKIE_NAME = "csrftoken"
CSRF_HEADER_NAME = [
    'HTTP_X_CSRFTOKEN'
]

SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')
SECURE_SSL_REDIRECT = True
SESSION_COOKIE_SECURE = True
CSRF_COOKIE_SECURE = True

CORS_ORIGIN_WHITELIST = ['http://localhost:3000','https://mywebsite:8088']

CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
)

CORS_ALLOW_HEADERS = (
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
)

知道如何解决吗？ 谢谢。

【参考方案1】：

尝试添加：

CORS_ORIGIN_WHITELIST = (
    'example.com',
    'localhost:3000',
    '127.0.0.1:3000',
    'more.domain.or.subdomains'
)

不要忘记添加中间件

MIDDLEWARE = [  # Or MIDDLEWARE_CLASSES on Django < 1.10
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

【参考方案2】：

django-cors-headers 相当简单，您的配置对我来说似乎是正确的。

不过，我也遇到了一个问题： 您的上传目录可能不是通过 Django 提供的，而是由服务器直接作为静态文件提供（Django 中的最佳实践和几乎默认行为）。即使是内置的开发服务器也可以在不调用 Django 应用程序的情况下提供静态文件。

由于您的应用未被调用，django-cors-headers 无法将 CORS 标头应用于这些响应。

【讨论】：

我认为这就是发生在我身上的事情。如何让它通过 Django？

【参考方案3】：

我有同样的问题，我认为是一个问题：

SECURE_SSL_REDIRECT = True

我不知道禁用它的影响，但将其设置为：

SECURE_SSL_REDIRECT = False

这使 cors 问题消失了。

【参考方案4】：

确保https://mywebsite:8000/uploads/vtt/ 是正确的网址。 就我而言，我使用了错误的端口，因为我的 API 使用了不同的端口。 我用52130替换了8000。

【讨论】：

感谢您的帮助。