Почему Chrome не может установить cookie

Question

У меня есть ответ от моего сервера. Заголовки ответа содержат действительный Set-Cook ie. Chrome Response / Cookies говорят, что у меня есть 1 повар ie, хорошо. Но ... Cook ie не настраивается в DevTools / Application / Cookies

/*
 My frontend on Vue
 I renamed 127.0.0.1 to www.example.com
 So running on www.example.com:80 or just www.example.com
*/
let response = await axios({
               method: 'post',
               url: 'http://127.0.0.1:3000/api/login', // my Node server on 3000 port   
               data: {
                   email : login,
                   password: password,
               },
            })

/*
 My backend part on Node.js+Express
 Running on localhost:3000 or 127.0.0.1:3000
 CookieParser() is setted
*/
let options = {
              maxAge: 345600000,
              httpOnly: true,
              path: '/',
            }

res
   .cookie('test', 'test', options)
   .cookie('access_token', token, options) //token contains a JWT string
   .send('');

/*
 Chrome Response Headers
*/
Access-Control-Allow-Origin: *
Connection: keep-alive
Content-Length: 0
Content-Type: text/html; charset=utf-8
Date: Sun, 09 Feb 2020 08:52:22 GMT
ETag: W/"0-2jmj7l5rSw0yVb/vlWAYkK/YBwk"
Set-Cookie: test=test; Max-Age=345600; Path=/; Expires=Thu, 13 Feb 2020 08:52:22 GMT; HttpOnly
Set-Cookie: access_token=example; Max-Age=345600; Path=/; Expires=Thu, 13 Feb 2020 08:52:22 GMT; HttpOnly
X-Powered-By: Express

/*
 Chrome request headers
*/
Accept: application/json, text/plain, '*/*'
Accept-Encoding: gzip, deflate, br
Accept-Language: ru-RU,ru;q=0.9
Cache-Control: no-cache
Connection: keep-alive
Content-Length: 45
Content-Type: application/json;charset=UTF-8
Host: 127.0.0.1:3000
Origin: http://www.example.com
Pragma: no-cache
Referer: http://www.example.com/
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.117 Safari/537.36

Более того, я пытался использовать Microsoft Edge, но проблема не в ушел. Почему браузеры не могут готовить ie, учитывая, что они знают о получении файлов cookie?

Answer 1

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

Используя исходный код, вы Нужно изменить его на withCredentials на true:

let response = await axios({
    method: 'post',
    url: 'http://127.0.0.1:3000/api/login', // my Node server on 3000 port   
    data: {
        email : login,
        password: password,
    },
    withCredentials: true
})

За кулисами будет установлен флаг withCredentials на XMLHttpRequest:

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials

В консоли вы получите ошибки CORS. Если вы преодолеете эти ошибки, вы сможете заставить их работать. Эти ошибки будут включать ...

Во-первых, сервер должен будет вернуть заголовок Access-Control-Allow-Credentials: true. Это также относится к предварительному запросу OPTIONS.

Во-вторых, в настоящее время вы используете Access-Control-Allow-Origin: *, но это не разрешено для запросов с использованием учетных данных. Это должно быть Access-Control-Allow-Origin: http://www.example.com. Аналогично для предварительной проверки.

На этом этапе значение повара ie должно быть установлено в большинстве браузеров (подробнее о нюансах браузера позже).

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

Просмотр файлов cookie в инструментах разработчика браузера не совсем прост. Как правило, инструменты показывают файлы cookie, установленные для того же источника, что и текущая страница, которая не включает файлы cookie, установленные с помощью запросов CORS. Чтобы просмотреть эти файлы cookie, вам нужно открыть другую вкладку браузера и задать URL-адрес, начинающийся с того же источника, что и запрос CORS. Но будьте осторожны, вам нужно выбрать URL, который не устанавливает сами куки, иначе это ничего не доказывает.

Еще один способ проверить, какие куки установлены, - отправить другой запрос (с помощью withCredentials) и посмотрите, какие cookie-файлы отправляются.

Тогда у нас есть определенные браузером c проблемы ...

В Safari действительно трудно получить cookie-файлы для установки через CORS. Если Safari является целевым браузером для вас, я предлагаю провести дальнейшее исследование этого вопроса.

Во-вторых, Chrome 80 должен существенно изменить правила использования файлов cookie CORS. См .:

https://www.chromium.org/updates/same-site

Вы уже увидите предупреждения об этом в своей консоли с более старыми версиями Chrome. Короче говоря, файлы cookie CORS нужно будет обслуживать в течение https и устанавливать директивы Secure и SameSite=None.

Answer 2

, если вы используете Ax ios или Fetch - по умолчанию они не отправляют куки. Если вы go и отметили в инструментах dav - (вкладка приложения -> cookies), вы должны их увидеть. это не проблема с chromes, а способ, которым вы пытаетесь отправить их обратно, при получении нужно добавить credentials: 'include', к объекту опции, в ax ios это {withCredentials: true}