Файл cookie не устанавливается, когда веб-приложение localhost обращается к удаленному API

Question

У меня есть веб-приложение React, которое обслуживается http://localhost:3000.

Это веб-приложение обращается к удаленному API, т.е. https://app.example.com/api.

При выполнении входа в API сервер возвращает cookie-файл сеанса, подобный этому:

Set-Cookie: JSESSIONID=ZmQ2Yzg4OWYtYzdiNi00Mzc1LTkzMzUtYzhiZjZmM2MzZjMy; Domain=app.example.com; Path=/api/; Secure; HttpOnly; SameSite=Lax

Однако в Chrome файл Set-Cookie не отображается в списке заголовков ответов. Кроме того, если я отправляю тот же запрос, Chrome не включает Cookie в заголовки запроса.

Итак, я понимаю, что он игнорирует Cookie. Почему?

Что касается CORS, я не вижу никаких проблем с ним, и Chrome правильно отправляет запрос. Вот возвращенные заголовки CORS в предпечатной проверке:

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: content-type
Access-Control-Allow-Methods: PATCH,GET,POST,PUT,DELETE
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Expose-Headers: ETag, X-XSRF-TOKEN

Я попытался добавить локальную запись DNS app.me pointig к 127.0.0.1, но все равно не работает.

Я также пытался с Edge, и я вижу, что появляется заголовок Set-Cookie, однако, cookie, похоже, тоже не установлен.

---

EDIT:

Это код Axios:

const axios = require('axios');

const backendUrl = 'https://app.example.com/api';
const constructUrl = url => `${backendUrl}${url}`;

const axiosConfig = {
  withCredentials: true,
};

export default {
  get: url => axios.get(constructUrl(url), axiosConfig),
  post: (url, data) => axios.post(constructUrl(url), data, axiosConfig),
  put: (url, data) => axios.put(constructUrl(url), data, axiosConfig),
  delete: (url, data) => axios.delete(constructUrl(url), data, axiosConfig),
};

//And in a different file...

HttpService.post('/login', creds)
        .then((response) => {
          const userInfo = response.data;
          const token = response.headers['x-xsrf-token'];
          sessionStorage.setItem('user-info', JSON.stringify(userInfo));
          sessionStorage.setItem('user-xsrf-token', JSON.stringify(token));

          window.location.replace('/');
        })
        .catch((err) => {
          if (err.response.status === 401) {
            setLoginError('Bad cred');
          } else {
            setLoginError('Fail to auth');
          }
        });

Answer 1

Во-первых, по какой-то причине я не могу заставить Chrome показывать файлы cookie, связанные с другими доменами, кроме того, который указан в адресной строке.Итак, внутри адресной строки у меня есть http://localhost:3000, и я не могу видеть файлы cookie, связанные с app.example.com.Кроме того, инструменты разработки не показывают Set-Cookie (ответ) и Cookie (запрос) по той же причине.Но это не означает, что файл cookie не получен и не установлен.

Однако в моем случае файл cookie не был установлен из-за наличия SameSite=Lax.

После удаления этого файлаатрибут cookie, cookie устанавливается и включается в следующие запросы.