My frontend and the backend are decoupled and client runs on localhost:3000
and the backend runs at localhost:8000
. I have the csrf and the refresh tokens and I set them as cookies on the server side. Now I need those cookies on the client side.
This is the react code that I have written :
fetch('http://localhost:8000/api/Acutes/SignIn/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'withCredentials': 'true'
},
body: JSON.stringify(values)
})
.then(data => data.json())
.then(data =>{
console.log(data)
})
.catch(error =>{
console.error(error);
})
Django settings
CORS_ORIGIN_WHITELIST = [
"http://localhost:9001",
"http://localhost:3000"
]
CORS_ALLOW_HEADERS = [
'accept',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
'withCredentials'
]
The error that seems to be there upon using this is as follows.
Access to fetch at 'http://localhost:8000/api/Acutes/SignIn/' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field withcredentials is not allowed by Access-Control-Allow-Headers in preflight response.
How should i deal with this error and get my cookies onto the client side?TIA