frontend cors error 'access-control-allow-credentials'

im using angular for my frontend and django with rest framework for my backend

any request made from the front end gives the following message in my console

Access to fetch at 'http://localhost:8000/login/' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'.


this is confusing as my frontend has a interceptor which enables withCredentials

export function authInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn){
console.log(req)
const modifiedRequest = req.clone({
withCredentials: true,
});
return next(modifiedRequest)
}


and my backend has allow credentials set to true so im not sure where this error is coming from

#cors settings

CORS_ALLOWED_ORIGINS = [
'http://localhost:4200',
]

CORS_ALLOW_CREDENTIALS: True

CSRF_TRUSTED_ORIGINS = [
'http://localhost:4200',
]

CORS_ALLOW_HEADERS = (
*default_headers,
)


so i removed withCredentials from my interceptor which allowed requests to go through but im using cookies for auth and none are set in my frontend when you log in

Continue reading...