У меня есть сервер node js, работающий на http://localhost:9000
и клиент с запущенным React JS http://localhost:3000
Я могу аутентифицировать пользователя, отправив запрос на публикацию в конечной точке http:localhost:9000/api/v1/authenticate
и отправив файл cookie клиенту, как вы можете видеть на моем response header
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:3000
Connection: keep-alive
Content-Length: 51
Content-Security-Policy: default-src 'self';base-uri 'self';block-all-mixed-content;font-src 'self' https: data:;frame-ancestors 'self';img-src 'self' data:;object-src 'none';script-src 'self';script-src-attr 'none';style-src 'self' https: 'unsafe-inline';upgrade-insecure-requests
Content-Type: application/json; charset=utf-8
Date: Fri, 25 Dec 2020 14:03:48 GMT
ETag: W/"33-tyk8lJX6mfHZ8N08Hj//Q3TUtmY"
Expect-CT: max-age=0
Referrer-Policy: no-referrer
Set-Cookie: connect.sid=s%3ALVe2uJLDGv502_M70nCSfjfawWhXG0Zx.zDCxMUAJE54wKO0ecJogSPLWZIQoOdHqF387XEX1A7E; Path=/; Expires=Fri, 08 Jan 2021 14:03:48 GMT; HttpOnly
Strict-Transport-Security: max-age=15552000; includeSubDomains
Vary: Origin
X-Content-Type-Options: nosniff
X-DNS-Prefetch-Control: off
X-Download-Options: noopen
X-Frame-Options: SAMEORIGIN
X-Permitted-Cross-Domain-Policies: none
X-XSS-Protection: 0
И теперь, когда я вошел в систему и проверил, аутентифицирован ли пользователь /check-session
,
Я могу получить данные в POSTMAN, и данные req.session.passport
существуют.
Но я не могу получить тот же результат, когда делаю запрос в интерфейсе с помощью axios
export const checkAuthSession = async () => {
try {
const req = await axios({
method: 'GET',
url: '/check-session',
withCredentials: true,
});
return Promise.resolve(req.data);
} catch (e) {
return Promise.reject(e);
}
}
Я ожидаю получить статус 200
и получить данные после входа в интерфейс, но получаю 404.
Это заголовки request
и response
после того, как я сделал запрос с помощью axios:
Заголовок запроса
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Cookie: connect.sid=s%3Ag7erGfrj2XWv5jrFXrSk4kJH-qvuCCa7.8e2cnCs1dduo86Ydne1sPDRSoAlYwdiAbGcZJqluZgc
Host: localhost:9000
Origin: http://localhost:3000
Referer: http://localhost:3000/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36 Edg/87.0.664.66
Заголовок ответа
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:3000
Connection: keep-alive
Content-Length: 9
Content-Security-Policy: default-src 'self';base-uri 'self';block-all-mixed-content;font-src 'self' https: data:;frame-ancestors 'self';img-src 'self' data:;object-src 'none';script-src 'self';script-src-attr 'none';style-src 'self' https: 'unsafe-inline';upgrade-insecure-requests
Content-Type: text/plain; charset=utf-8
Date: Fri, 25 Dec 2020 14:17:18 GMT
ETag: W/"9-0gXL1ngzMqISxa6S1zx3F4wtLyg"
Expect-CT: max-age=0
Referrer-Policy: no-referrer
Strict-Transport-Security: max-age=15552000; includeSubDomains
Vary: Origin
X-Content-Type-Options: nosniff
X-DNS-Prefetch-Control: off
X-Download-Options: noopen
X-Frame-Options: SAMEORIGIN
X-Permitted-Cross-Domain-Policies: none
X-XSS-Protection: 0
И вот как я настроил CORS в экспрессе:
app.use(cors({
origin: 'http://localhost:3000',
credentials: true
}));
Я установил базовый URL следующим образом: axios.defaults.baseURL = `${foodieUrl}/api/${foodieApiVersion}`; //http:localhost:9000/api/v1
Так должно быть http://localhost:9000/api/v1
@Анатолий Да, так оно и есть.
Наконец нашел ответ:
В моем запросе axios я только устанавливал параметры withCredentials: true
в моей конечной точке /check-session
.
Чтобы исправить это, я должен установить учетные данные для всех запросов.
axios.defaults.withCredentials = true;
Как также сказал MDN:
Для запроса CORS с учетными данными, чтобы браузеры могли предоставить ответ внешнему коду JavaScript, как серверу (используя заголовок Access-Control-Allow-Credentials), так и клиенту (путем установки режима учетных данных для XHR, Fetch, или запрос Ajax) должны указывать, что они соглашаются на включение учетных данных.
Покажите код, в котором вы задали базовый URL для
axios