Как получить set-cookies в react из django

Я запускаю frontend как react и backend как Django.

Я настроил CORS и создал среду для своего веб-приложения. В этом приложении я храню некоторые значения в сессии для каждого пользователя. Требование состоит в том, чтобы сохранять данные при последующих запросах с фронтенда. Однако я столкнулся с проблемой при получении идентификатора сессии из ответа. Я убедился, что политики CORS настроены правильно. Несмотря на это, я не могу извлечь идентификатор сессии из ответа.Я смог увидеть идентификатор сессии из браузера, но не на react.

Вопрос: Как правильно извлечь идентификатор сессии из ответа в моем React-приложении?

Может ли кто-нибудь подсказать мне, как правильно получить идентификатор сессии из ответа в моей настройке? Любые идеи или предложения будут высоко оценены. Спасибо!

Мой CORS

from corsheaders.defaults import default_headers,default_methods

CORS_ALLOW_HEADERS = (
    *default_headers,
)

CORS_ALLOW_METHODS = (
    *default_methods,
)

CORS_ORIGIN_ALLOW_ALL = True  # Set to False for security reasons
# CORS_ORIGIN_WHITELIST = [
#     "http://127.0.0.1:3000",
#     "http://localhost:3000",
#     # Add other origins as needed
#     "http://192.168.1.36:3000",
# ]

CORS_ALLOW_CREDENTIALS = True

Моя средняя школа

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'corsheaders.middleware.CorsMiddleware',  # Include only once
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

my react fetch

const { REACT_APP_SERVER_URL } = 'http://192.168.1.19';

const sendChatMessage = async (message) => {
  try {
    const response = await fetch(`http://192.168.1.19:8000/chat/post`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ message }),
      credentials: 'include',
    });

    if (!response.ok) {
      throw new Error('Failed to send message');
    }

    const data = await response.json();
    console.log(response.headers.getSetCookie()); // here the total header is empty, but i am able to see in browser

    return data;
  } catch (error) {
    throw new Error('Error sending message:', error);
  }
};

export default {
  sendChatMessage,
};

Я смог увидеть идентификатор сессии в браузере, но я не могу получить его в приложении react. что это выглядит как

Заголовки ответов из Django

HTTP/1.1 200 OK
Date: Thu, 16 May 2024 10:50:58 GMT
Server: WSGIServer/0.2 CPython/3.10.12
Content-Type: application/json
Vary: Accept, Cookie, origin
Allow: POST, OPTIONS
X-Frame-Options: DENY
Content-Length: 100
access-control-allow-origin: http://localhost:3000
access-control-allow-credentials: true
X-Content-Type-Options: nosniff
Referrer-Policy: same-origin
Cross-Origin-Opener-Policy: same-origin
Set-Cookie:  sessionid=hvzruncvvtqhvjice7zfw5rbpnzrxkh2; expires=Thu, 30 May 2024 10:50:58 GMT; HttpOnly; Max-Age=1209600; Path=/; SameSite=None; Secure

Заголовки запросов от react

POST /chat/post HTTP/1.1
Accept: */*
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Content-Length: 20
Content-Type: application/json
Host: 192.168.1.19:8000
Origin: http://localhost:3000
Referer: http://localhost:3000/
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36

Дополнительные сведения: Я заметил идентификатор сессии в заголовках ответа браузера, но не смог получить к нему доступ в своем приложении React. Предоставленные заголовки ответа включают идентификатор сессии, но я не знаю, как получить его на фронтенде.

Закрытие: Любые соображения или предложения по решению этой проблемы были бы очень признательны. Спасибо!

Вернуться на верх