I am using django as backend and react as frontend.
Also using google-oauth and the url it redirects to is a callback url in the backend and it redirects to the frontend dashboard. Also using Django-auth
But, as my login page is on React and not the default template, I set the settings.LOGIN_URL = 'http://localhost:3000'
So, when front end accesses a URL eg localhost:8000/authorised_url it should redirect to my frontend login page if a user is not authenticated.
But the browser gives the error:
Access to XMLHttpRequest at 'http://localhost:3000/?next=http%3A//localhost%3A8000/auth/check' (redirected from 'http://localhost:8000/auth/check') from origin 'http://localhost:3000' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
Should I find another way of achieving the above, as I beleive the default Django auth model might not set the headers properly?
Django Settings:
LOGIN_URL = 'http://localhost:3000'
CORS_ALLOWED_ORIGINS = [
'http://localhost:3000']
CORS_ALLOW_CREDENTIALS = True
CSRF_TRUSTED_ORIGINS = [
'http://localhost:3000'
]
Cors is above common middleware
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
Also in react
axios.defaults.baseURL = 'http://localhost:8000/';
axios.defaults.withCredentials = true;
Initially the flow was handled in front end and had a special endpoint to check if a user is logged in or not and perform the request, but shifting to this results in many errors.