Змусити Axios надсилати файли cookie у своїх запитах автоматично

Я надсилаю запити від клієнта на мій сервер Express.js за допомогою Axios.

Я встановлюю cookie на клієнті і хочу прочитати це cookie з усіх запитів Axios, не додаючи їх вручну, щоб запитувати вручну.

Це приклад мого клієнтського запиту:

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

Я намагався отримати доступ до заголовків або файлів cookie, використовуючи ці властивості на своєму сервері Express.js:

req.headers
req.cookies

Жоден із них не містив жодного печива. Я використовую проміжне програмне забезпечення для аналізу файлів 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 для свого власного домену, якщо для параметраCCentientials не встановлено значення 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 на сторону клієнта. Як приклад, цей сценарій також генерується за допомогою passportjs, який встановлює 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

TLDR; потрібно встановити {withCredentials: true}як GET-запит, так і POST-запит (отримання файлу cookie) для обох axios, а також для отримання.

Як змусити Axios автоматично надсилати файли cookie у запитах?

набір axios.defaults.withCredentials = true;

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

це призведе до помилки CORS, якщо для параметра "Access-Control-Allow-Origin" встановлено значення wildcard (*). Тому обов'язково вкажіть URL-адресу походження вашого запиту

наприклад: якщо ваш передній, який робить запит, працює на localhost: 3000, то встановіть заголовок відповіді як

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

також встановити

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

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

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

Встановивши, { withCredentials: true }ви можете зіткнутися з проблемою перехресного походження. Для вирішення цього вам потрібно скористатися

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

Тут ви можете прочитати про withCredentials

У вас два думки змішані.

У вас є "react-cookie" та "axios"

react-cookie => - це обробка файлів cookie на стороні клієнта

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

З цією інформацією, якщо ви хочете, щоб файли cookie з боку клієнта також надходили на стороні резервного копіювання, вам потрібно буде з'єднати їх разом.

Примітка з "Реакції-cookie" Readme:

Ізоморфне печиво!

Щоб мати доступ до файлів cookie користувачів під час серверної візуалізації, ви можете використовувати plugToRequest або setRawCookie.

посилання на readme

Якщо це те, що вам потрібно, чудово.

Якщо ні, будь ласка, прокоментуйте, щоб я міг детальніше розробити.

Тож у мене виникла така сама проблема, і я втратив близько 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" спочатку.