来自 CORS 预检通道的 CORS 标头“Access-Control-Allow-Headers”中缺少令牌“access-control-allow-origin”

Posted 2023-02-27

【中文标题】来自 CORS 预检通道的 CORS 标头“Access-Control-Allow-Headers”中缺少令牌“access-control-allow-origin”

【英文标题】：missing token ‘access-control-allow-origin’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel

【发布时间】：2020-02-26 09:03:34

【问题描述】：

我正在尝试将我的 React 应用程序连接到 Django 服务器。 React 应用程序在 http://127.0.0.1:3000/ 上运行

响应标头设置了Access-Control-Allow-Origin: http://127.0.0.1:3000，但我仍然看到错误。

我目前正在到处推荐使用 Django 的 corsheaders 包。推荐How can I enable CORS on Django REST Framework的好例子。

但此时我也尝试了自定义中间件。

我的 Django Settings.py 文件包含以下内容

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

Django 在 8000，React 在 3000

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

我的反应请求看起来像这样。 （当我直接运行而不是通过浏览器运行时，它可以工作）

const fetch = require('node-fetch')

const response = await fetch(
      url,
      
        json: true,
        method: 'GET',
        headers: 
          'Access-Control-Allow-Origin': '*',
          Accept: '*/*',
          'Content-Type': 'application/json'
        
      
    )

再一次，奇怪的是我从 http://127.0.0.1:3000 发出请求，而响应标头有 Access-Control-Allow-Origin: http://127.0.0.1:3000 但是由于某种原因，它仍然失败。

哦，浏览器控制台中的错误消息是

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8000/query/?date=2019-10-25. (Reason: missing token ‘access-control-allow-origin’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8000/query/?date=2019-10-25. (Reason: CORS request did not succeed).

任何帮助都会很棒！谢谢

【问题讨论】：

为什么不在 nginx 后面运行它们作为代理传递？那你就不用担心CORS问题了？

这个答案可能会有所帮助：***.com/a/32346520/5013234

@zerohedge，可能很接近。如果内容类型不匹配，您是否知道是否会出现 CORS 错误？我正在使用 django 的 JsonResponse，但看起来浏览器认为响应内容类型是 Content-Type: text/html; charset=utf-8

@sideshowbarker 以 200 的形式返回。但请求方法显示 OPTIONS。

从前端 javascript 代码中的 fetch 调用中删除整个 headers 块。 Access-Control-Allow-Origin 是响应标头，而不是请求标头。尝试从前端代码将其设置为请求标头只会导致您看到的错误。此外，代码正在执行 GET 请求，因此设置 Content-Type 请求标头是没有意义的——没有请求正文。而且显式设置Accept: '*/*' 请求标头没有意义。

【参考方案1】：

@sideshowbarker 想通了。这是因为我在请求中发送了标头。

变化

const fetch = require('node-fetch')

const response = await fetch(
      url,
      
        json: true,
        method: 'GET',
        headers: 
          'Access-Control-Allow-Origin': '*',
          Accept: '*/*',
          'Content-Type': 'application/json'
        
      
    )

到

const fetch = require('node-fetch')

const response = await fetch(
      url,
      
        json: true,
        method: 'GET'
      
    )

立即解决问题！谢谢！