如何解决我的 Django API 的 CORS 问题？

Question

我无法解决 Django API 中的 CORS 问题。当我调用此 API 时，出现错误：

访问从'http://localhost:8000/'获取 'http://localhost' 已被 CORS 策略阻止：响应 预检请求未通过访问控制检查：否 请求中存在“Access-Control-Allow-Origin”标头 资源。如果不透明的响应满足您的需求，请设置请求的 模式为“no-cors”以在禁用 CORS 的情况下获取资源。

为了启用 CORS，我做了

pip install django-cors-headers

并将以下代码添加到

settings.py

：

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

MIDDLEWARE_CLASSES = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    '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_WHITELIST = [
    'localhost:80',
    'localhost:8000',
    '127.0.0.1:8000'
]

我应该说我在 Docker 上运行我的项目。这是

docker-compose.yml

:

version: '2'

services:
  django-docker:
    build:
      context: .
      dockerfile: Dockerfile.django
    container_name: my.django
    image: my-django
    ports:
      - 8000:8000

  webapp-docker:
    build:
      context: .
      dockerfile: Dockerfile.webapp
    container_name: my.webapp
    image: my-web
    ports:
      - 80:80

Answer 1

您需要将

corsheaders.middleware.CorsMiddleware

中间件添加到

settings.py

中的中间件类：

MIDDLEWARE_CLASSES = (
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.BrokenLinkEmailsMiddleware',
    'django.middleware.common.CommonMiddleware',
    #...
)

您的中间件类中有重复的

django.middleware.common.CommonMiddleware

。

然后，您可以通过添加以下设置为所有域启用 CORS：

CORS_ORIGIN_ALLOW_ALL = True

或者只为指定域启用 CORS：

CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = (
    'http://localhost:8000',
)

Answer 2

尝试在您的设置中添加：

from corsheaders.defaults import default_headers

CORS_ALLOW_HEADERS = default_headers + (
    'Access-Control-Allow-Origin',
)

Answer 3

我在浏览器中访问

http://127.0.0.1:8000

但在我的 JavaScript 代码中使用

fetch('http://localhost:8000');

时出现此错误。解决方案是使用

127.0.0.1

或

localhost

但不要混合使用它们。

Answer 4

唯一帮助我的是安装django-cors-headers：

pip install django-cors-headers

然后使用下一个变量更新 django 设置：

INSTALLED_APPS = [
    ...
    "corsheaders",
    ...
]

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