Выпуск Cors с React Frontend и Django Backend

Итак, я создал бэкенд API на Django со встроенным модулем пользователя для аутентификации входа и т.д.

API логина возвращает Set Cookie, когда передан правильный пользователь и пароль. Однако, когда вызывается fetch, он не устанавливает Cookie в браузере, чтобы использовать его позже при последующих запросах.

Настройка CORS в Django.

  ALLOWED_HOSTS = ["django-env-south-1.elasticbeanstalk.com", "*","127.0.0.1"]
CORS_ORIGIN_ALLOW_ALL = False
CORS_ALLOW_CREDENTIALS = True

CORS_ORIGIN_WHITELIST = [
    'https://127.0.0.1:3000',
    'http://127.0.0.1:3000',
    'https://localhost:3000',
    'http://localhost:3000',
]
CSRF_TRUSTED_ORIGINS = [
    "127.0.0.1:3000",
    "localhost:3000",
]

Код повторной выборки

   var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/x-www-form-urlencoded");
    
    var urlencoded = new URLSearchParams();
    urlencoded.append("username", `${users.username}`);
    urlencoded.append("password", `${users.password}`);

    var requestOptions = {
      method: 'POST',
      headers: myHeaders,
      body: urlencoded,
      redirect: 'follow',
      credentials: "include"

 };
 

//Fetching Login api
fetch("http://127.0.0.1:8000/authentication/signin", requestOptions)
  .then(response => response.text())
  .then(data => handleResult(JSON.parse(data)))
  .catch(error => console.log('error', error));
  }

После установки Cookie в браузере, используя приведенный ниже код, передайте Cookie в новый вызов API.

let myHeaders = new Headers();
      let requestOptions = {
        method: 'GET',
        headers: myHeaders,
        credentials: "include"
      }; 
  
//Calling ME api
  fetch("http://127.0.0.1:8000/authentication/me", requestOptions)
    .then(response => response.text())
    .then(result => handleData(JSON.parse(result)))
    .catch(error => console.log('error', error));

Вы не установили параметр CORS_ALLOW_CREDENTIALS. Как упоминается в django-cors-headers' GitHub repo:

Если True, cookies будет разрешено включать в межсайтовые HTTP запросах. По умолчанию False.

Указывая это, вы установите заголовок Access-Control-Allow-Credentials, позволяющий браузеру открывать куки для JavaScript.

Следовательно, вам нужно добавить в настройки следующее:

SESSION_COOKIE_SAMESITE = "None"
CORS_ALLOW_CREDENTIALS = True
Вернуться на верх