У меня есть веб-приложение 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
, указывающую на 127.0.0.1
, но все равно не работает.
Я также пробовал с Edge, и я вижу, что появляется заголовок Set-Cookie, однако файл cookie, похоже, тоже не установлен.
Обновлено:
Это код 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');
}
});
@NicoleWhite Я использую AXIOS (github.com/аксиос/аксиос)
Вы поставили withCredentials: true
?
@NicoleWhite Да, для него установлено значение true.
Не могли бы вы отредактировать свой вопрос, включив в него код axios, который вы используете для входа в систему?
@NicoleWhite Готово
Во-первых, по какой-то причине я не могу заставить Chrome показывать файлы cookie, связанные с другими доменами, кроме того, который указан в адресной строке. Итак, в адресной строке у меня есть http://localhost:3000
, и я не вижу файлы cookie, связанные с app.example.com
.
Кроме того, инструменты разработчика не отображают Set-Cookie
(ответ) и Cookie
(запрос) по той же причине. Но это не означает, что cookie не получен и не установлен.
Однако в моем случае cookie не был установлен из-за наличия SameSite=Lax
.
После удаления этого атрибута cookie файл cookie устанавливается и включается в следующие запросы.
Что вы используете для отправки запроса в API? Принести?