0

I'm trying to connect my a React Application to a Django Server. The React application is running on http://127.0.0.1:3000/

The response headers has Access-Control-Allow-Origin: http://127.0.0.1:3000 set, yet I am still seeing the error.

I am currently using Django's corsheaders package as recommended everywhere. Decent example of the recommendation How can I enable CORS on Django REST Framework.

But I have also tried custom middleware at this point.

My Django Settings.py file contains the following

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

Django is on 8000, React on 3000

CORS_ORIGIN_WHITELIST = [
    'http://127.0.0.1:3000',
    'http://localhost:3000',
    'http://127.0.0.1:8000',
    'http://localhost:8000',
]

My request in react looks like this. (It works when I run it directly, not through the browser)

const fetch = require('node-fetch')

const response = await fetch(
      url,
      {
        json: true,
        method: 'GET',
        headers: {
          'Access-Control-Allow-Origin': '*',
          Accept: '*/*',
          'Content-Type': 'application/json'
        }
      }
    )

Again, it is so strange that I am making the request from http://127.0.0.1:3000 and the response headers has Access-Control-Allow-Origin: http://127.0.0.1:3000 but for some reason it is still failing.

Oh the error message in the browsers console is

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8000/query/?date=2019-10-25. (Reason: missing token ‘access-control-allow-origin’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8000/query/?date=2019-10-25. (Reason: CORS request did not succeed).

Any help would be awesome! Thanks

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
Martin Zegarelli
  • 73
  • 1
  • 9
  • Why not run them both behind NGINX as proxy passes? Then you don't have to worry about CORS problems? – Trent Oct 31 '19 at 02:01
  • This answer might be of help: https://stackoverflow.com/a/32346520/5013234 – zerohedge Oct 31 '19 at 02:02
  • @zerohedge, that may be close. Do you happen to know if CORS errors show up if content type isn't matched? I'm using django's JsonResponse, but it looks like the browser thinks the response content type is **Content-Type: text/html; charset=utf-8** – Martin Zegarelli Oct 31 '19 at 02:10
  • @sideshowbarker its coming back as a 200. But the request Method is showing OPTIONS. – Martin Zegarelli Oct 31 '19 at 02:29
  • Remove the entire `headers` block from your fetch call in your frontend JavaScript code. Access-Control-Allow-Origin is a response header, not a request header. Trying to set it from your frontend code as a request header will only cause exactly the error you’re seeing. Also, the code is doing a GET request, so it makes no sense to set a Content-Type request header — there’s not request body. And there’s no point in explicitly setting a `Accept: '*/*'` request header. – sideshowbarker Oct 31 '19 at 02:53

1 Answers1

1

@sideshowbarker figured it out. It was because I was sending headers in my request.

Changing 

const fetch = require('node-fetch')

const response = await fetch(
      url,
      {
        json: true,
        method: 'GET',
        headers: {
          'Access-Control-Allow-Origin': '*',
          Accept: '*/*',
          'Content-Type': 'application/json'
        }
      }
    )

to 

const fetch = require('node-fetch')

const response = await fetch(
      url,
      {
        json: true,
        method: 'GET'
      }
    )

Immediately fixed the issue! Thank you!

Martin Zegarelli
  • 73
  • 1
  • 9