Заставить Axios автоматически отправлять файлы cookie в своих запросах

Я отправляю запросы от клиента на свой сервер Express.js с помощью Axios.

Я установил файл cookie на клиенте и хочу читать этот файл cookie из всех запросов Axios, не добавляя их вручную в запрос вручную.

Это пример моего клиентского запроса:

axios.get(`some api url`).then(response => ...

Я попытался получить доступ к заголовкам или файлам cookie, используя эти свойства на моем сервере Express.js:

req.headers
req.cookies

Ни один из них не содержал файлов cookie. Я использую промежуточное ПО для парсера файлов cookie:

app.use(cookieParser())

Как заставить Axios автоматически отправлять файлы cookie в запросах?

Редактировать:

Я устанавливаю cookie на клиенте следующим образом:

import cookieClient from 'react-cookie'

...
let cookie = cookieClient.load('cookie-name')
if(cookie === undefined){
      axios.get('path/to/my/cookie/api').then(response => {
        if(response.status == 200){
          cookieClient.save('cookie-name', response.data, {path:'/'})
        }
      })
    }
...

Хотя он также использует Axios, это не имеет отношения к вопросу. Я просто хочу встраивать файлы cookie во все свои запросы после установки файла cookie.

У меня была такая же проблема, и я решил ее с помощью withCredentialsсвойства.

XMLHttpRequest из другого домена не может устанавливать значения файлов cookie для своего собственного домена, если для параметра withCredentials не установлено значение true перед выполнением запроса.

axios.get('some api url', {withCredentials: true});

TL; DR:

{ withCredentials: true } или axios.defaults.withCredentials = true

Из документации axios

withCredentials: false, // default

withCredentials указывает, должны ли запросы управления доступом между сайтами выполняться с использованием учетных данных

Если вы пройдете { withCredentials: true }с вашим запросом, он должен работать.

Лучше было бы установить withCredentialsкак trueвaxios.defaults

axios.defaults.withCredentials = true

Я не знаком с Axios, но, насколько мне известно, в javascript и ajax есть опция

withCredentials: true

Это автоматически отправит cookie на клиентскую сторону. Например, этот сценарий также создается с помощью паспортаjs, который устанавливает cookie на сервере.

Также важно установить необходимые заголовки в экспресс-ответе. Вот те, которые у меня сработали:

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', yourExactHostname);
  res.header('Access-Control-Allow-Credentials', true);
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

Другое решение - использовать эту библиотеку:

https://github.com/3846masa/axios-cookiejar-support

который интегрирует поддержку "Tough Cookie" в Axios. Обратите внимание, что этот подход по-прежнему требует withCredentialsфлага.

для людей, которые все еще не могут его решить, этот ответ мне помог. ответ stackoverflow: 34558264

TL; DR; необходимо установить {withCredentials: true}как запрос GET, так и запрос POST (получение cookie) для обоих axios, а также для выборки.

Как заставить Axios автоматически отправлять файлы cookie в запросах?

устанавливать axios.defaults.withCredentials = true;

или для какого-то конкретного запроса вы можете использовать axios.get(url,{withCredentials:true})

это приведет к ошибке CORS, если ваш 'Access-Control-Allow-Origin' установлен на подстановочный знак (*). Поэтому не забудьте указать URL-адрес происхождения вашего запроса.

например: если ваш интерфейс, который выполняет запрос, выполняется на localhost: 3000, установите заголовок ответа как

res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');

также установить

res.setHeader('Access-Control-Allow-Credentials',true);

Так что у меня была точно такая же проблема, и я потерял около 6 часов своей жизни на поиски, у меня был

withCredentials: true

Но браузер по-прежнему не сохранял файл cookie, пока по какой-то странной причине мне не пришла идея перетасовать настройку конфигурации:

Axios.post(GlobalVariables.API_URL + 'api/login', {
        email,
        password,
        honeyPot
    }, {
        withCredentials: true,
        headers: {'Access-Control-Allow-Origin': '*', 'Content-Type': 'application/json'
    }});

Похоже, вы всегда должны сначала отправлять ключ withCredentials.

Вы можете использовать withCredentialsсвойство для передачи файлов cookie в запросе.

axios.get(`api_url`, { withCredentials: true })

При установке { withCredentials: true }вы можете столкнуться с проблемой перекрестного происхождения. Чтобы решить эту проблему, вам нужно использовать

expressApp.use(cors({ credentials: true, origin: "http://localhost:8080" }));

Здесь вы можете прочитать о withCredentials

Вы путаете эти два мнения.

У вас есть "react-cookie" и "axios"

response-cookie => предназначен для обработки cookie на стороне клиента

axios => предназначен для отправки запросов ajax на сервер

Имея эту информацию, если вы хотите, чтобы файлы cookie со стороны клиента передавались и на стороне сервера, вам нужно будет соединить их вместе.

Примечание из файла Readme "react-cookie":

Изоморфные куки!

Чтобы иметь доступ к пользовательским файлам cookie во время рендеринга на сервере, вы можете использовать plugToRequest или setRawCookie.

ссылка на readme

Если это то, что вам нужно, отлично.

Если нет, прокомментируйте, чтобы я мог уточнить детали.