Django 的 CORS 问题，缺少“Access-Control-Allow-Headers”答案

【问题标题】：CORS problem with Django, missing 'Access-Control-Allow-Headers'Django 的 CORS 问题，缺少“Access-Control-Allow-Headers”
【发布时间】：2019-12-10 07:50:06
【问题描述】：

我在使用 CORS 和 Django 时遇到问题，当我尝试从我的应用程序中发布 JSON 时，我没有收到任何响应但出现错误：

跨域请求被阻止：同源策略阻止读取 http://localhost:8000/converter2/ 的远程资源。（原因： 'access-control-allow-headers' 符号丢失 'Access-Control-Allow-Headers' CORS 期间的 CORS 标头预连接）。

另外，当我尝试连接我的 Django 服务器时，会记录以下内容："OPTIONS /converter2/ HTTP/1.1" 200 0。好的，我没有收到来自服务器的“Access-Control-Allow-Headers”。从我读过的所有内容来看，这需要在服务器端解决。所以我尝试安装django-cors-headers并配置如下：

# settings.py
INSTALLED_APPS = [
...
'corsheaders'
]
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ...
]
CORS_ORIGIN_ALLOW_ALL = True

遗憾的是没有任何改变。所以我尝试将 CORS_ORIGIN_ALLOW_ALL 更改为 False 并将我的应用程序来源添加到 CORS_ORIGIN_WHITELIST，就像这样：

CORS_ORIGIN_WHITELIST = [
    'http://localhost:8000'
]

再一次，没有任何改变。我现在尝试使用服务器响应强制标头，如this answer 中建议的那样：

...
response = HttpResponse(status=201)
response["Access-Control-Allow-Origin"] = "*"
response["Access-Control-Allow-Headers"] = "X-Requested-With, Content-Type"
return response

仍然没有，我不知道我还能尝试什么。我会很感激新的建议，谢谢。

Ionic v4，端口 8100

Django v2.2.4，端口 8000

我不认为这是前端问题，但我会发布请求以供参考：

const httpOptions = {
    headers: new HttpHeaders({
      'Content-Type':  'application/json',
      'Access-Control-Allow-Origin': 'http://localhost:8000, http://localhost:8100',
      'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type',
      'Accept': 'application/json'
    })
};

this.http.post("http://localhost:8000/converter2/", file, httpOptions)
.pipe(
    finalize(() => {
        loader.dismiss();
    })
).subscribe(res => {
    if (res['success']) {
        this.presentToast('File uploaded complete')
    } else {
        this.presentToast('File uploaded failed')                       
    }
});

【问题讨论】：

没有关于如何解决此问题的具体知识，但我在使用 localhost 与 127.0.0.1 等特定地址时肯定遇到过问题。也许尝试改用127.0.0.1？
感谢您的建议，但这是我尝试的第一件事。在其他系统中也有类似的问题。
消息“原因：在 CORS 预连接期间 'Access-Control-Allow-Headers' CORS 标头中缺少 'access-control-allow-headers' 符号” 表示您的前端 JavaScript 代码正在尝试向 request 添加一个名为“access-control-allow-headers”的标头。你不想那样做。该标头严格来说是响应标头。尝试将其设置为请求标头只会导致您遇到的那种问题。因此，删除前端 JavaScript 尝试设置该标头的任何部分。
使用 stackoverflow.com/posts/57313686/edit 编辑/更新问题并添加一个 sn-p 显示发出请求的前端 JavaScript 代码部分。
就是这样！我已经在原始帖子的底部发布了我的应用请求。从请求中删除 Access-Control-Allow-Origin、Access-Control-Allow-Methods 和 Access-Control-Allow-Headers 使此错误停止。我使用此配置是因为与我的一个旧项目相同，它不会产生此错误（与 Django 无关）。非常感谢！如果你愿意，请写一个答案，我会接受的。

标签： python django cors

【解决方案1】：

正如sideshowbarker 所述，这种特殊情况下的问题是，在我的应用请求中，标头配置不正确。我在请求的标头中发送Access-Control-Allow-Origin、Access-Control-Allow-Methods 和Access-Control-Allow-Headers，而正确的是从响应标头接收此属性。

一些简单的 PHP 服务器在发送此选项时不会抛出错误，这就是我使用它们的原因，但 Django 服务器并非如此。不过，不要将此标头作为请求发送。

const httpOptions = {
    headers: new HttpHeaders({
      'Content-Type':  'application/json',
      'Accept': 'application/json'
    })
};

【讨论】：