Django的CORS问题，缺少“ Access-Control-Allow-Headers” [英] CORS problem with Django, missing 'Access-Control-Allow-Headers'

问题描述

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

I'm having a problem with CORS and Django where, when I try to POST a JSON from my app, I get no response but got an error:

跨域请求被阻止：相同的源策略阻止在 http上读取
远程资源：// localhost：8000 / converter2 / 。 （原因：在预连接CORS
时，
'Access-Control-Allow-Headers'CORS标头中缺少
'access-control-allow-headers'符号。

Cross-origin request blocked: Same Origin Policy prevents reading of remote resource at http://localhost:8000/converter2/. (Reason: 'access-control-allow-headers' symbol missing in 'Access-Control-Allow-Headers' CORS header during CORS pre-connection).

此外，当我尝试连接Django服务器时，日志记录如下： OPTIONS / converter2 / HTTP / 1.1 200 0 。好的，我没有从服务器收到 Access-Control-Allow-Headers。从我所读的所有内容中，这需要在服务器端解决。因此，我尝试安装 django-cors-headers 并将其配置如下：

Also, when I try to connect my Django server logs this: "OPTIONS /converter2/ HTTP/1.1" 200 0. Okay, I'm not receiving 'Access-Control-Allow-Headers' from the server. From all I have read this needs to be solved in server side. So I tried to install django-cors-headers and configure it like the following:

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

可悲的是没有任何变化。因此，我尝试将CORS_ORIGIN_ALLOW_ALL更改为False并将我的应用原点添加到CORS_ORIGIN_WHITELIST，就像这样：

Sadly nothing changed. So I tried change the CORS_ORIGIN_ALLOW_ALL to False and add my app origin to CORS_ORIGIN_WHITELIST, just like this:

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

同样，什么也没有改变。我现在尝试用服务器响应强制标头，如此答案中建议的那样：

Again, nothing changed. I tried now to force the headers with the server response, like suggested in this answer:

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

什么都没有，我不知道我还能尝试什么。我将不胜感激新建议，谢谢。

Still nothing, I don't know what else I can try. I would appreciate new suggestions, thank you.

Ionic v4，端口8100

Django v2.2.4，端口8000

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

I don't think this is a front side problem, but I will post the request for reference:

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')                       
    }
});

推荐答案

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

As stated by sideshowbarker, the problem in this particular case was that, in my app request, the headers configuration was incorrect. I was sending Access-Control-Allow-Origin, Access-Control-Allow-Methods and Access-Control-Allow-Headers inside request's headers, while the correct is receive this attributes from the response headers.

发送此选项时，一些简单的PHP服务器不会引发错误，这就是我使用它们的原因，但Django服务器却并非如此。

Some simple PHP servers don't thrown an error when this options are send, that is why I used them, but it's not the case with Django server. Nevertheless, don't send this headers as a request.

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

这篇关于Django的CORS问题，缺少“ Access-Control-Allow-Headers”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！