CODEWITHSUNDEEP
djangoangularxmlhttprequestlocalhostdjango-cors-headers
lionel
lionel

Reputation: 170

CORS policy blocks XMLHttpRequest

With Ionic Angular running in on my localhost I made this call to my Django backend (running on different localhost):

  test() {
    return this.httpClient.get(endpoint + '/test', {
      headers: { mode: 'no-cors' },
    });
  }

And on the backend side I have following code to respond:

@csrf_exempt
def test(request):
  response = json.dumps({'success': True})
  return HttpResponse(response, content_type='application/json', headers={'Access-Control-Allow-Origin': '*'})

I have also this in my settings.py file:

 INSTALLED_APPS = [
      ...
      'corsheaders',

    ]

    MIDDLEWARE = [
      ...
      'corsheaders.middleware.CorsMiddleware',
     ]

     CORS_ALLOW_ALL_ORIGINS = True 
     CORS_ALLOW_CREDENTIALS = True

Still, I get this error message in my console:

Access to XMLHttpRequest at 'http://127.0.0.1:8000/test' from origin 'http://localhost:8100' has been blocked by CORS policy: Request header field mode is not allowed by Access-Control-Allow-Headers in preflight response.

What am I doing wrong?

Upvotes: 0

Views: 529

Answers (1)

Umar Hayat
Umar Hayat

Reputation: 4991

You need to just add one more setting

CORS_ALLOW_ALL_HEADERS=True

Other than the above you do not need to set a header on each response. Just simply respond back with payload as

@csrf_exempt
def test(request):
  response = json.dumps({'success': True})
  return HttpResponse(response, content_type='application/json', headers={'Access-Control-Allow-Origin': '*'})

Upvotes: 1

Related Questions