I have searched many of the SO questions and answers on this topic but cannot solve my problem. My js is based on this answer
xxx.js
import Cookies from 'js-cookie';
async function sendDataToAPI(uri, params) {
let url = buildURI(uri, params);
let endpoint = `${process.env.API_DOMAIN}${url}/`;
try {
const response = await fetch(endpoint, {
method: "POST",
credentials: 'include',
headers: {'X-CSRFToken': Cookies.get('csrftoken')},
body: JSON.stringify({
data: params,
}),
}
);
const data = await response.json();
return data;
...
settings.py
...
CSRF_TRUSTED_ORIGINS = [
'http://localhost:8888'
]
CORS_ORIGIN_ALLOW_ALL = False
CORS_ORIGIN_WHITELIST = (
'http://localhost:8888',
)
CORS_ALLOW_HEADERS = [
"X-CSRFToken",
]
CORS_ALLOW_CREDENTIALS = True
...
INSTALLED_APPS = [
...,
'corsheaders',
...
]
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
...
]
I get ther error
WARNING:django.security.csrf:Forbidden (CSRF cookie not set.)