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

Question

当前我有 django 1.98 作为后端和反应作为前端。

我遇到了这个错误：

访问xmlhttprequest at 'https：//mywebsite：8000/uploads/vtt/' 'http：//localhost：3000'被CORS策略阻止：否 请求的"访问控制"标头 资源。

我在我的VirtualenViroment

上安装了 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',
)

任何想法如何解决？谢谢。

Answer 1

django-cors-headers是合理的，你的配置对我来说似乎是正确的。

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

由于未调用您的应用程序，因此django-cors-headers不能将CORS标头应用于这些响应。

Answer 2

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

Answer 3

尝试添加：

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',
    ...
]

Answer 4

我也遇到了同样的问题，我认为：

SECURE_SSL_REDIRECT = True

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

SECURE_SSL_REDIRECT = False

这使CORS问题消失了。