Сделать 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 в запросы?

Edit:

Я устанавливаю 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.

Ответы

Ответ 1

У меня была та же проблема и исправлена ее withCredential свойство.

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

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

Ответ 2

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

withCredentials: true

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

Ответ 3

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

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();
});

Ответ 4

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

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

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

Ответ 5

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

withCredentials: false,//по умолчанию

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

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

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

axios.defaults.withCredentials = true

Ответ 6

Вы получаете, что двое думают смешанным.

У вас есть "реакция-cookie" и "axios"

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

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

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

Примечание из файла "реакция-cookie":

Изоморфные файлы cookie!

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

ссылка на readme

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

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

Ответ 7

Я в основном работаю над другими вещами, поэтому, возможно, я что-то упустил, но поддержка axios-cookiejar-support не работала в моем приложении узла.

Это делает (отредактировано)

const jar = new CookieJar()  // from tough-cookie
const response = await this.axios(url, config)
const cookie = response.headers["set-cookie"] as string[] | undefined
if (cookie) {
  cookie.forEach(k => jar.setCookieSync(k, this.baseUrl + url))
  this.axios.defaults.headers.Cookie = jar.getCookieStringSync(url)
}

Ответ 8

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

set 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);

Ответ 9

для людей, которые все еще не могут решить эту проблему, этот ответ помог мне. fooobar.com/info/80868/...

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