Как создать функцию входа в систему с 2-мя отдельными услугами? - сеанс обмена с поддоменами

Question

Описание проблемы

Я разработал 2 службы - одну для веб-сервера, предоставляющего пакеты React, а другую для API-сервера. Приложение React будет иметь функцию входа в систему с помощью сеанса на сервере API. Этот проект работал нормально, когда я запускаю их в локальной среде - http://localhost:8080 для приложения реагирования и http://localhost:4000 для API - но когда я попробовал его с Heroku, все произошло не так, как я ожидал.

Давайте назовем каждыйиз них react.herokuapp.com и api.herokuapp.com для удобства.

Приложение React реализует функцию входа в систему с помощью модуля axios, который отправляет запрос на сервер API для аутентификации. Основная логика будет выглядеть следующим образом:

// App.jsx
const axios = require('axios')
axios.default.withCredentials = true

// ...
axios.post('https://api.herokuapp.com/auth/login', { "login credentials" })

Сервер API выполняет настройки для обработки задач входа в систему. Он использует express-session, cors, passport для поддержки сеанса для каждого пользователя.

const sessionOption = {
  resave: true,
  saveUninitialized: false,
  secret: process.env.COOKIE_SECRET,
  cookie: {
    httpOnly: true,
    secure: false, // because I did not set any cert
    domain: 'herokuapp.com'
  }
}

const corsOption = {
  origin: 'https://react.herokuapp.com',
  credentials: true
}

app.use(cors(corsOption))
app.use(session(sessionOption))
app.use(passport.initialize())
app.use(passport.session())
//...

Я установил cookie.domain в 'herokuapp.com', который является супер-доменом каждой услуги, так чтосеанс может быть разделен между https://api.herokuapp.com и https://react.herokuapp.com. Кроме того, я установил опцию cors с origin и credentials, чтобы заголовки ответа были правильно установлены.

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

Мой вопрос

Когда я отправляю запрос на вход в службу, я подтвердил, что в ответе есть заголовок set-cookie, в котором идентификатор сеансаВключено. Но проблема в том, что Этот файл cookie с идентификатором сеанса не включается в последующие запросы . Это просто игнорируется.

Я искал в сети, чтобы получить какую-либо информацию по этой проблеме, и заметил, что уже уже ведутся некоторые переговоры в express-session репозитории github .

И я выяснил, что эта проблема из-за блокировки 3rd party cookie, которая является поведением по умолчанию типичных современных браузеров ( Почему cookie экспресс-сессии блокируется как третий файл cookie? ).

Если это так, то как мне спроектировать архитектуру, в которой сервер, предоставляющий веб-интерфейс, и сервер API разделены в домене ? Должен ли я использовать JWT вместо этого? Если я хочу сохранить эту структуру сервиса, как мне реализовать функцию входа в систему (правила домена, как развернуть)?

PLUS, это специфическая проблема с Heroku? Если я протестирую, например, с AWS, эта проблема будет решена?