0

I have a React frontend and a DRF Backend. In the frontend, I am trying to use axios to refresh a JWT access token. The refresh token is sent with every request as an HttpOnly cookie. DRF's Simple JWT library is refreshing the access token. The frontend is hosted on Netlify, which is working, and I am using ngrok to tunnel the backend from my localhost to an https url.

Inside my backend settings.py, I have:

INSTALLED_APPS = [
    'corsheaders',
    ...
]

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

CORS_ALLOWED_ORIGINS = [
    "https://app.netlify.app", //this is not the actual url, but the format is the same
]

CORS_ALLOW_CREDENTIALS: True

However, whenever I connect to the backend, I get these errors:

XMLHttpRequest cannot load https://ngrokurl/api/token/refresh/ due to access control checks.

Origin https://app.netlify.app is not allowed by Access-Control-Allow-Origin.

Meanwhile, in the backend console, I see that the preflight OPTIONS request returns a 200 status:

[15/Jan/2022 17:47:25] "OPTIONS /api/token/refresh/ HTTP/1.1" 200 0

Not sure if that is anything to do with CORS though.

This is what I am getting:

Error: Image of errors

Request / response: enter image description here

I would greatly appreciate any help; I am quite new to all of this!

Chris Myers
  • 23
  • 3
  • Add a screenshot of the request and response from your browser's Network tab. – jub0bs Jan 15 '22 at 19:25
  • I think I have added the image now. – Chris Myers Jan 15 '22 at 20:13
  • The screenshot shows errors, not the request and response. – jub0bs Jan 15 '22 at 20:33
  • Sorry, I was in a rush so didn't read that properly! I've uploaded the request and response of the action that isn't working. – Chris Myers Jan 15 '22 at 22:14
  • Does this answer your question? [CORS: Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true](https://stackoverflow.com/questions/19743396/cors-cannot-use-wildcard-in-access-control-allow-origin-when-credentials-flag-i) – Andrew Jan 18 '22 at 07:11
  • You can set a flag/value in the environment (like `env=local`) and then use that to switch between configurations. The same works for testing. I don't know any way around this, its just part of cors, so you will need to specify the ngrok url somehow when running locally. – Andrew Jan 18 '22 at 07:18

1 Answers1

1

I noticed an error CORS_ALLOW_CREDENTIALS:True should be CORS_ALLOW_CREDENTIALS= True

gianpiero papappicco
  • 149
  • 2
  • Thank you very much for checking this! This was me being stupid, since I had it written correctly earlier on. Either way, when I change it back to the correct version, it still produces exactly the same errors ... – Chris Myers Jan 15 '22 at 18:53