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

这是django cors头的设置。在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 3

有了CORS，我们有几件事需要考虑。您可以在这里找到更多：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers，转到访问控制链接。

以上是您的配置，您已经设置：

• CORS_ALLOWED_ORIGINS：http://localhost:8000，...
• CORS_ALLOW_METHODS：“删除”、"GET“、"OPTIONS”、“修补程序”、"POST“、”(default)
• CORS_ALLOW_CREDENTIALS: False (default)
• CORS_ALLOW_HEADERS = "accept", "accept-encoding", "authorization", "content-type", "dnt", "origin", "user-agent", "x-csrftoken", "x-requested-with",

“

因此，如果应用程序使用凭据，那么将CORS_ALLOW_CREDENTIALS更改为True。如果它仍然不能工作，请检查您的请求头，确保其中没有特殊的标头，如果您的请求中确实有特殊的标头，最好在CORS_ALLOW_HEADERS内部。