1

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')                       
    }
});
5
  • 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? Commented Aug 1, 2019 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. Commented Aug 1, 2019 at 18:28
  • 1
    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. Commented Aug 1, 2019 at 21:42
  • Use 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. Commented Aug 1, 2019 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. Commented Aug 2, 2019 at 12:40

1 Answer 1

1

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'
    })
};
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.