django-cors-headers 不允许来自允许来源的请求

Question

我面临的问题是我无法从 NextJS 前端获取现有用户。我使用的后端框架是 Django（以及 django-cors-headers 包）。 django-cors-headers 不允许某个 HTTP 请求，但它应该允许。

我的 next.config.js 包含重写，以便我可以访问我的后端。

async redirects() {
    return [
      {
        source: '/api/:path*',
        destination: 'http://localhost:8000/:path*/',
        permanent: true,
      },
    ]
  },

我的 django-cors-headers 设置如下所示：

# CORS

CSRF_TRUSTED_ORIGINS = [
    'http://localhost:3000',
]

CORS_ALLOWED_ORIGINS = [
    'http://localhost:3000',
    'http://localhost:8000',
    'http://127.0.0.1:3000',
    'http://127.0.0.1:8000',
]

CORS_ALLOW_ALL_ORIGINS = True

失败的请求尝试获取 ID 为 1 的用户。该用户存在，因此该请求应该成功。

fetch(`/api/users/${String(userId)}/`, {
    mode: 'cors',
    credentials: 'include',
    headers: {
      'Content-Type': 'application/json',
    },
  })

但是，我从请求中得到的唯一结果是有关 CORS 的错误消息。

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8000/users/1.
(Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
Status code: 301.

看起来我的 django-cors-headers 设置是错误的。但我可以获取我的 JWT 令牌。以下请求成功。

fetch('/api/token', {
    method: 'POST',
    mode: 'cors',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      email: mail,
      password,
    }),
  })

Answer 1

除了仔细检查中间件的加载顺序之外，我几乎尝试了所有方法...我通过以下加载顺序解决了我的问题

MIDDLEWARE = [
    # Default
    '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
    'corsheaders.middleware.CorsMiddleware',
]

...到

MIDDLEWARE = [
    # CORS
    'corsheaders.middleware.CorsMiddleware',
    # Default
    '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',
]

我知道这必须是简单的事情，但现在我只是觉得自己像个大白痴......

Answer 2

我也有同样的问题。我尝试在 React 应用程序中调用 Django API，这个错误困扰了我几天，但我找到了解决方案。

1. 首先检查网络上所有建议的解决方案，例如：在 Django 中安装 corsheaders 并将其添加到安装应用程序中，以及在setting.py 中的 MIDDLEWARE 中。 所以下一步： 在任何浏览器中打开网络选项卡，我们必须检查两个重要的标头。在请求期间。
2. 请求标头中的 Access-Control-Request-Headers。
3. 响应标头中的 Access-Control-Allow-Headers。
4. 如图所示，请求头中的Access-Control-Request-Headers是content-type，但是响应中的Access-Control-Allow-Headers是http://localhost:3000，content-type。所以这就是问题所在。

4. 要解决该问题，请转到后端的 settings.py 检查 CORS_ALLOW_HEADERS 并删除除“content-type”之外的所有内容。 所以再检查一下。 我的bug消失了。

Answer 3

对于 CORS，我们有一些需要考虑的事情。您可以在这里找到更多信息：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers，转到访问控制链接。

您在上面的配置中已设置：

• CORS_ALLOWED_ORIGINS：http://localhost:8000，...
• CORS_ALLOW_METHODS：“DELETE”、“GET”、“OPTIONS”、“PATCH”、“POST”、“PUT”（默认）
• CORS_ALLOW_CREDENTIALS：False（默认）
• CORS_ALLOW_HEADERS = [ “接受”， “接受编码”， “授权”， “内容类型”， “不”， “起源”， “用户代理”， “x-csrftoken”， “x-请求-with”， ]（默认）

因此，如果您的应用程序使用凭据，请将 CORS_ALLOW_CREDENTIALS 更改为 True。如果仍然无法正常工作，请检查您的请求标头，确保其中没有特殊标头，如果您的请求中确实有特殊标头，则最好位于 CORS_ALLOW_HEADERS 内。

Answer 4

这是 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',
    # add this 
    'corsheaders',        
]

MIDDLEWARE = [
    # add this
    'corsheaders.middleware.CorsMiddleware',
    'whitenoise.middleware.WhiteNoiseMiddleware',
    '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',
]

 # set this
 CORS_ALLOW_ALL_ORIGINS=True

Status code: 301

表示请求的资源无效，因此应将请求重定向到正确的url。您很可能正在向无效端点发送请求

Answer 5

我也面临同样的问题。我认为 django-cors-headers 仅适用于 DRF。