Короче говоря, невозможно получить доступ к файлам cookie разных источников, document.cookie может получить доступ только к текущим (или родительским) файлам cookie домена.

Намек на то, что это является основной причиной, заключался в том, что ssc-hrep3 упомянул «оба домена» в своем вопросе.

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

См. ответ ssc-hrep3 для получения дополнительной информации и обходного пути.

TL;DR: доступ для чтения к междоменным файлам cookie невозможен. Добавление токена CSRF в заголовок ответа было бы решением. Другим решением, позволяющим полностью обойти CORS и междоменные запросы, является использование обратного прокси-сервера.

Проблема

Как указано в моем вопросе выше, часть JavaScript моего внешнего интерфейса (например, https://example1.com пытается получить доступ к файлу cookie, отличному от HttpOnly, из моего внутреннего интерфейса, например, https://example2.com. Чтобы иметь доступ к удаленному API с помощью JavaScript, я с помощью CORS. Это позволяет запросам проходить. Я использую withCredentials: true на внешней стороне и Access-Control-Allow-Credentials: true на внутренней стороне. Затем заголовок Set-Cookie устанавливает файл cookie на серверной стороне, а не на внешней. end origin, поэтому файл cookie не виден ни в DevTools, ни в команде document.cookie в JavaScript.

Файлы cookie, установленные на внутреннем источнике, всегда являются частью запроса на серверную часть через CORS. Однако мне потребуется доступ к содержимому файла cookie CSRF, чтобы добавить токен в заголовок запроса (для предотвращения атак CSRF). Как я выяснил, невозможно прочитать (или записать) файлы cookie из другого домена с помощью JavaScript, независимо от того, какая настройка CORS используется (см. эти ответы StackOverflow: [1], [2]). Браузер ограничивает доступ к содержимому файла cookie источниками того же домена.

Решения

Это приводит к выводу, что нет возможности получить доступ к содержимому файла cookie, отличного от HttpOnly, другого домена. Обходным путем для этой проблемы может быть установка токена CSRF в дополнительный настраиваемый заголовок ответа. Эти заголовки обычно также недоступны для другого домена. Однако их можно открыть с помощью настройки CORS серверной части Access-Control-Expose-Headers. Это безопасно, если используется строго ограниченный заголовок Access-Control-Allow-Origin.

Другим обходным решением может быть использование обратного прокси-сервера, который вообще обходит проблемы с CORS и междоменными запросами. Использование такого обратного прокси обеспечивает специальный путь на внешнем интерфейсе, который будет перенаправлен на внутренний (серверный). Например, вызовы на https://front-end/api проксируются на https://back-end/api. Поскольку все запросы от внешнего интерфейса направляются к внешнему прокси-серверу в одном и том же домене, браузер обрабатывает каждый вызов как запрос того же домена, а файлы cookie устанавливаются непосредственно на внешнем источнике. Недостатки этого решения включают в себя потенциальные проблемы с производительностью из-за того, что между ними находится другой сервер (задержки) и файлы cookie должны быть установлены на двух источниках (двойной вход в систему при прямом доступе к серверной части). Настроить обратный прокси-сервер можно с помощью nginx, apache или очень просто, используя http-proxy-middleware в Node.js:

var express = require('express');
var proxy = require('http-proxy-middleware');

var options = {
	target: 'https://[server]',
	changeOrigin: true,
	secure: true
};

var exampleProxy = proxy(options);
var app = express();

app.use('/api', exampleProxy);
app.use(express.static(__dirname + "/public"));
app.listen(process.env.PORT || 8080);

1

Возможно, вам потребуется добавить Access-Control -Allow-Headers, чтобы разрешить передачу определенных заголовков.

Пожалуйста, попробуйте добавить следующее в заголовки ответов вашего сервера (метод OPTIONS) для целей тестирования.

Access-Control-Allow-Headers: Content-Type, *

В производстве я рекомендую ограничивать заголовки следующим образом (но я не уверен на 100% в правильном списке заголовков, нужно поэкспериментировать здесь, если это работает)

Access-Control-Allow-Headers: Cookie, Set-Cookie

См. это для справки https://quickleft.com/blog/cookies-with-my-cors/

2

Другая проблема, с которой вы можете столкнуться, заключается в том, что ваши файлы cookie будут установлены в том домене, где находится ваша серверная служба (а не в домене, из которого вы отправляете запрос).

Пожалуйста, проверьте это также

3

Как вариант последней проблемы - браузер может запретить установку куки для домена b.xxx.com из запроса, который приходит от a.xxx.com

В этом случае вы можете попробовать установить cookie на родительском домене xxx.com, чтобы он был доступен для вашей клиентской части.

Как вы можете прочитать здесь, спецификация XHR явно запрещает чтение Set-Cookie. Лучший способ сделать это — передать информацию в заголовке вместо файла cookie.