Почему Set-Cookies не функционирует в браузере, хотя в Postman все работает? Как можно сохранить куки в браузере?

У меня есть API на React, который использует JWT аутентификацию с refresh-токенами, хранящимися в куках. Refresh-токены отправляются по адресу <a href="https://localhost:7048/api/auth/update-user-access-token" rel="nofollow">https://localhost:7048/api/auth/update-user-access...</a> для получения нового access-токена каждые 5 минут. При регистрации по <a href="https://localhost:7048/api/auth/register" rel="nofollow">https://localhost:7048/api/auth/register</a> я получаю ответ с refresh и access токенами. Ответ выглядит следующим образом: <br/> <pre><code>access-control-allow-credentials:
true
access-control-allow-origin:
https://localhost
content-type:
application/json; charset=utf-8
date:
Mon, 14 Oct 2024 19:27:17 GMT
location:
https://localhost:7048/api/auth/register
server:
Kestrel
set-cookie:
IssuerRefreshToken=8019B0E82524B316A4798B5DC04BBAD63C7171F7C7F5F89351D7EC736CF316B7A5A3ED8E4D4FBDCBAAECEB970E1DC7016F8F968F8063DF4AA4FE2EBAA8EB55B3; path=/; secure; httponly
vary:
Origin</code></pre> <br/> У меня есть access-токен, но...
  • 14 октября 2024 г. 20:22
Ответы на вопрос 2
Если у вас возникают проблемы с сохранением cookie в браузере, несмотря на то, что в Postman все работает, это может быть связано с несколькими факторами. Давайте разберем основные моменты, которые стоит проверить.

### 1. CORS (Cross-Origin Resource Sharing)

Если ваш сервер и клиент (React-приложение) находятся на разных доменах (включая порты), то вам необходимо правильно настроить CORS на стороне сервера.

- Убедитесь, что заголовок `Access-Control-Allow-Origin` содержит URL вашего клиентского приложения (например, `https://localhost`).
- Убедитесь, что сервер также позволяет отправку куки с помощью заголовка `Access-Control-Allow-Credentials`, который, как видно из вашего ответа, уже установлен в `true`.

Пример настройки CORS в ASP.NET:

```csharp
services.AddCors(options =>
{
    options.AddPolicy("AllowSpecificOrigin",
        builder => builder.WithOrigins("https://localhost")
                          .AllowCredentials()
                          .AllowAnyHeader()
                          .AllowAnyMethod());
});
```

### 2. Включение `withCredentials` в запросах

Когда вы отправляете запросы из вашего React-приложения, вам нужно включить параметр `withCredentials`:

```javascript
axios.post('https://localhost:7048/api/auth/register', data, { withCredentials: true })
```

Это необходимо для того, чтобы браузер отправлял и принимал cookies с запросами.

### 3. Параметры установки cookie

Убедитесь, что ваши куки берут в расчет следующие параметры:

- **Secure**: Куки, помеченные как `Secure`, будут отправляться только по HTTPS. Если вы работаете в локальной среде, убедитесь, что вы используете HTTPS, иначе куки не будут установлены.
- **HttpOnly**: Куки с этим флагом не будут доступны через JavaScript. Это хорошая практика для защиты, но не повлияет на возможность сохранения куков.
- **SameSite**: Если `SameSite` не указан, браузеры могут использовать значение по умолчанию. Проверьте, требуется ли вам библиотеки или механизмы (например, `SameSite=None; Secure`), чтобы куки могли передаваться между разными источниками.

### 4. Проверка браузера

Некоторые браузеры могут блокировать куки, если не совпадают специфические правила безопасности. Попробуйте включить отладку в DevTools вашего браузера и проверьте сетевые запросы. Обратите внимание на:
- Заголовки запроса и ответа.
- Ошибки или предупреждения, связанные с безопасностью или куками.

### 5. Убедитесь, что сервер правильно обрабатывает запросы

Иногда проблема может находиться на стороне сервера. Убедитесь, что ваш сервер правильно обрабатывает запросы, возвращает правильные заголовки, и что нет ошибок при установкеcookie.

### Заключение

Проверка указанных точек должна помочь вам понять, почему куки не сохраняются в браузере. Следуйте описанным рекомендациям, и если проблема не решится, можно рассмотреть дополнительные детали конфигурации или кода.
Всё сохраняется, но домен localhost != localhost:7048 != localhost:3000. 
Все запросы к соответствующему домену localhost:7048 будут иметь нужный куки.

Если на проде и api и основной сайт будут на одном домене, без разделений - используй встроенный dev server proxy, чтобы и при локальной разработке они тоже были одним, проксируя запросы на localhost:7048 с localhost:3000.

Если на разных и авторизация должна работать по типу SSO - не используй куки и вообще не пили свой велосипед, используй готовые реализации oauth и для бэка и для фронта.
Похожие вопросы