Особенности withCredentials
Многие знакомы с таким флагом XmlHttpRequest как withCredentials, знают для чего он нужен, какие заголовки нужно использовать с ним в паре, чтобы браузер нормально обрабатывал ответы сервера. И я вроде тоже знал, а что не знал — нагугливал, и всё работало как надо. Но однажды столкнулся с неожиданным поведением, о чём и хочу поведать.
Как указано в спецификации www.w3.org/TR/cors/#omit-credentials-flag, withCredentials позволяет нам использовать в запросе к серверу user-credentials, т.е. куки, аутентификационные данные и клиентские SSL-сертификаты.
Я делаю запрос для получения куки:
Сервер возвращает корректный ответ с:
Далее я обращаюсь по тому же адресу с полученной кукой:
Здесь и происходит неожиданное для меня: хоть я и указал «withCredentials: true», полученная из первого запроса кука не отправляется во втором запросе.
Выясняется, что кука из первого запроса не сохраняется браузером, и отправлять со вторым запросом нечего.
Предположил, что причина в HttpOnly, но проверить с кукой без этого флага не получилось, потому что перед этим попробовал добавить «withCredentials: true» в первый запрос, и происходит чудо — кука сохраняется браузером, и во втором запросе она успешно отправляется.
Таким образом, получается, что указание «withCredentials: true» необходимо не только для отправки «user-credentials» в запросе к серверу, но и для использования их из ответов от сервера. Вроде бы логично, но использование слова «request» во всех спецификациях и описаниях сбивает с толку, надеюсь не только меня)
PS. Как то я упустил эту спецификацию, где прямо написано, что при отсутствии этого атрибута «cookies are to be ignored in response», двойка мне за навыки поиска. Но надеюсь, теперь многие смогут избежать возможного недопонимания.
Заставить Axios отправлять куки в своих запросах автоматически
Я отправляю запросы от клиента на мой сервер Express.js с помощью Axios.
Я установил cookie на клиенте и хочу прочитать этот cookie из всех запросов Axios, не добавляя их вручную для запроса вручную.
Это мой пример запроса на стороне клиента:
Я пытался получить доступ к заголовкам или файлам cookie с помощью этих свойств на моем сервере Express.js:
Ни в одном из них не было файлов cookie. Я использую промежуточное ПО для анализа файлов cookie:
Как заставить Axios автоматически отправлять куки в запросах?
Я установил cookie на клиенте так:
Хотя он также использует Axios, он не имеет отношения к вопросу. Я просто хочу встраивать файлы cookie во все мои запросы после установки файла cookie.
9 ответов
XMLHttpRequest из другого домена не может устанавливать значения файлов cookie для своего собственного домена, если для параметра withCredentials не установлено значение true перед выполнением запроса.
Для людей, которые все еще не могут решить эту проблему, этот ответ помог мне. ответ stackoverflow: 34558264
TLDR ; нужно установить
Как заставить Axios автоматически отправлять куки в запросах?
Set axios.defaults.withCredentials = true;
Или для какого-то конкретного запроса вы можете использовать axios.get(url,
это приведет к ошибке CORS, если для вашего Access-Control-Allow-Origin установлено значение подстановочного знака (*). Поэтому не забудьте указать URL происхождения вашего запроса
Например: если ваш клиентский интерфейс, выполняющий запрос, работает на localhost: 3000, установите заголовок ответа как
Вы получаете две мысли смешаны.
У вас есть «ответ-печенье» и «аксиос»
Response-cookie => для обработки cookie на стороне клиента
Axios => для отправки ajax-запросов на сервер
С этой информацией, если вы хотите, чтобы куки со стороны клиента передавались также и на бэкэнд-стороне, вам нужно будет соединить их вместе.
Примечание от Readme: cookie-файла:
Чтобы иметь возможность доступа к пользовательским файлам cookie при выполнении рендеринга на сервере, вы можете использовать plugToRequest или setRawCookie.
Если это то, что вам нужно, отлично.
Если нет, пожалуйста, прокомментируйте, чтобы я мог уточнить подробнее.
Также важно установить необходимые заголовки в экспресс-ответе. Это те, которые работали на меня:
Я не знаком с Axios, но, насколько я знаю, в javascript и ajax есть вариант
Это автоматически отправит куки на стороне клиента. Например, этот сценарий также генерируется с помощью passportjs, который устанавливает cookie на сервере
Таким образом, у меня была точно такая же проблема, и я потерял около 6 часов поисков жизни.
Но браузер все еще не сохранял cookie, пока по какой-то странной причине у меня не возникла идея переставить настройки конфигурации:
Похоже, вы всегда должны сначала отправить ключ withCredentials.
TL; DR:
< withCredentials: true >или axios.defaults.withCredentials = true
Из документации Axios
withCredentials указывает, должны ли межсайтовые запросы Access-Control выполняться с использованием учетных данных
Если вы передадите < withCredentials: true >с вашим запросом, он должен работать.
Лучшим способом было бы установить withCredentials как true в axios.defaults
Другое решение заключается в использовании этой библиотеки:
Pass cookies with axios or fetch requests
When sending requests from client-side JavaScript, by default cookies are not passed.
By default, fetch won’t send or receive any cookies from the server, resulting in unauthenticated requests https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
Two JavaScript HTTP clients I use are axios, a “Promise based HTTP client for the browser and Node.js” and the fetch API (see Fetch API on MDN).
Pass cookies with requests in axios
In axios, to enable passing of cookies, we use the withCredentials: true option.
Which means we can create a new axios instance with withCredentials enabled:
It’s also possible to set it in the request options:
Or override the global defaults:
Pass cookies with requests using fetch
The equivalent with fetch is to set the credentials: ‘include’ or credentials: ‘same-origin’ option when sending the request:
Get The Jest Handbook (100 pages)
Take your JavaScript testing to the next level by learning the ins and outs of Jest, the top JavaScript testing library.
Join 1000s of developers learning about Enterprise-grade Node.js & JavaScript
Hugo Di Francesco
Co-author of «Professional JavaScript» with Packt. He runs the Code with Hugo website helping over 100,000 developers every month and holds an MEng in Mathematical Computation from University College London (UCL). He has used JavaScript extensively to create scalable and performant platforms at companies such as Canon and Elsevier.
Get The Jest Handbook (100 pages)
Take your JavaScript testing to the next level by learning the ins and outs of Jest, the top JavaScript testing library.
#javascript
Hugo Di Francesco
A testing guide for Express with request and response mocking/stubbing using Jest or sinon
Hugo Di Francesco
Русские Блоги
vue axios простая настройка и использование
Введение в аксиомы
axios Это HTTP-клиент, основанный на Promise для браузеров и nodejs.
Особенности самого axios:
Вводить
Представлено через cdn
пример
Инициироватьgetзапрос
Инициироватьpostзапрос
Одновременно инициированныйМножественныйзапрос
псевдоним метода запроса axios
Для удобства мы предоставили псевдонимы для всех поддерживаемых методов запроса.
Примечание. При использовании указанного выше метода псевдонима атрибуты, такие как URL-адрес, метод и данные, не нужно повторно объявлять в config.
Вспомогательная функция для обработки нескольких одновременных запросов:
метод экземпляра axios
Вы можете создать экземпляр axios с общей конфигурацией
axios.creat([config])
Все доступные методы экземпляра, дополнительная заявленная конфигурация будут объединены с конфигурацией экземпляра
Запросить конфигурацию
Структура ответа
Ответ состоит из следующих частей информации
При использовании then вы получите такой ответ:
При использовании catch или при передаче обратного вызова отклонения в качестве второго параметра then ответ может использоваться через объект ошибки, как описано в разделе обработки ошибок.
распределение по умолчанию
Вы можете указать значения конфигурации по умолчанию, которые будут использоваться в каждом запросе.
значение по умолчанию для глобальных аксиом
Значение по умолчанию для настраиваемого экземпляра
Приоритет конфигурации
Элементы конфигурации объединяются с помощью определенных правил (порядок приоритета), запрос config> instance.defaults> system default, более высокий приоритет имеет приоритет над более низким приоритетом.
Перехватчик
Перехватить запрос или ответ до того, как он будет обработан, или поймать.
Если вы захотите удалить перехватчик позже, вы можете сделать это
Вы также можете добавить перехватчик в экземпляр axios
Обработка ошибок
Вы можете использовать параметр конфигурации validateStatus, чтобы определить настраиваемый диапазон ошибок кода состояния HTTP.
отменить
Используйте токен отмены, чтобы отменить запрос
API токенов отмены Axios основан на предложении об отмене обещаний, которое все еще находится на первом этапе.
Вы можете создать токен отмены с помощью фабричного метода CancelToken.source, например:
Вы также можете создать токен отмены, передав функцию-исполнитель конструктору CancelToken:
Примечание. Вы можете отменить несколько запросов, используя один и тот же токен отмены.
Используйте application / x-www-form-urlencoded для форматирования
По умолчанию js-объект серии axios находится в формате JSON. Чтобы отправить данные в формате application / x-wwww-form-urlencoded, вы можете использовать следующие настройки.
Браузер Браузер
В браузере вы можете использовать API URLSearchParams следующим образом:
Примечание. URLSearchParams поддерживает не все браузеры, но доступна заливка поли (убедитесь, что панель находится в глобальной среде браузера).
Другие методы. Для форматирования данных можно использовать библиотеку qs.
Node.js
В nodejs вы можете использовать строку запроса следующим образом:
Вы также можете использовать библиотеку qs.
promises
axios основан на собственной реализации ES6 Promise. Если окружающая среда не поддерживает это, используйте прокладки.
Решение связанных проблем
В настоящее время, если вы работаете в других компонентах, вы не можете использовать команду axios.
Но если axios переписать как свойство прототипа Vue, эту проблему можно решить.
I set withCredentials is true, but cross-site requests failed. I can’t find why. #587
Comments
2ue commented Dec 12, 2016 •
the cross-site url is can access directly, but I can’t get the data(dateType is json) through cross-site requests.
Code:
The text was updated successfully, but these errors were encountered:
rubennorte commented Jan 6, 2017
Could you provide more information about this error? What are you seeing in the browser console?
mshibl commented Jan 29, 2017
mdsaleemj commented May 17, 2017 •
aarondfrancis commented Jan 4, 2018
@mshibl’s solution worked for me. Setting the default and not relying on an instance was the trick ¯_(ツ)_/¯
velopert commented Apr 27, 2018
I was having the same issue. Why is the instance setting not working?
psychosis448 commented Jul 11, 2018 •
@velopert I got the same question.
@mshibl thank you for sharing!
mqliutie commented Sep 3, 2018
@mshibl Thanks for your share
martdavidson commented Oct 10, 2018
martdavidson commented Oct 10, 2018
My mistake, withCredentials set on the instance IS working for me. My issue was I wasn’t seeing the set-cookie header in the response in the network tab or in document.cookie, but it’s probably because I don’t have a good enough understanding of what Chrome lets you see from cross-origin cookies.
Going to chrome://settings/siteData let me search by the domain of the cookie, and I saw that it was being set correctly with:
and it wasn’t being set at all without, so it’s working for me in axios version 0.18.0
codeclown commented Oct 21, 2018
Which version does this occur on?
On current master this test passes, so there should be no difference between using an instance or not:
maamounapprise commented Jan 10, 2019
it’s not an issue with axios i just made it work on the latest version, I was using express cors so i simply added credentials: true, origin: http://yourdomain:3000. This won’t work on localhost you have to point your localhost into some fake domain and have all your apps run on that domain
veselinnguyen commented Feb 6, 2019
Is there any progress on this issue?
waspar commented Feb 8, 2019
Is there any progress on this issue? 😢
psychosis448 commented Feb 8, 2019
Part of my HTTP setting: