CORS problem with Django, missing 'Access-Control-Allow-Headers'

Question

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:

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).

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

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, port 8100

Django v2.2.4, port 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')                       
    }
});

No specific knowledge of how to fix this, but I have definitely run into issues before with Django when using `localhost` vs a specific address like `127.0.0.1`. Maybe try using `127.0.0.1` instead? — jimijimjim, Aug 01 '19 at 17:53
Thanks for the suggestion, but this was one of the first things I tried. Also had issues like this in other systems. — leonardofmed, Aug 01 '19 at 18:28
The message *“Reason: 'access-control-allow-headers' symbol missing in 'Access-Control-Allow-Headers' CORS header during CORS pre-connection”* indicates that your frontend JavaScript code is trying to add a header named 'access-control-allow-headers' to the *request*. You don’t want to do that. That header is strictly a response header. Trying to set it as a request header will just cause exactly the kind of problem that you’re running into. So, remove whatever part of your frontend JavaScript is trying to set that header. — sideshowbarker, Aug 01 '19 at 21:42
Use https://stackoverflow.com/posts/57313686/edit to edit/update the question and add a snippet showing the part of your frontend JavaScript code that is making the request. — sideshowbarker, Aug 01 '19 at 21:42
That was it! I have already posted my app request in original post's bottom. Removing the `Access-Control-Allow-Origin`, `Access-Control-Allow-Methods` and `Access-Control-Allow-Headers` from the request made this error stop. I used this configuration because was the same of an old project of mine that don't generate this error (not related to Django). Thank you very much! If you want, please write an answer and I will accept it. — leonardofmed, Aug 02 '19 at 12:40

score 1 · Accepted Answer · answered Aug 05 '19 at 12:04

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.

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

CORS problem with Django, missing 'Access-Control-Allow-Headers'

1 Answers1

Linked