vue.js - 从 axios 中的 response.headers 访问 Set-Cookie 值

Question

我正在使用 VueJS 和 Axios 发送这样的请求:

 axiosAPI.get('/login/flows', {params: {id: 'string'}})
            .then(res => {
                console.log('cookie', res.headers)
             }

作为返回，服务器向我发送此响应:

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: Content-Type
Cache-Control: private, no-cache, no-store, must-revalidate
Content-Length: 646
Content-Type: application/json; charset=utf-8
Date: Thu,xxxx 13:56:21 GMT
Set-Cookie: csrf_token=Lxv3zynm1Fua0hU0/W1+R2w=; Path=/.ory/kratos/public/; Domain=x.y ; Max-Age=31536000; HttpOnly; SameSite=Lax
Vary: Origin
Vary: Cookie

如您所见，服务器在 Set-Cookies 中发送了一个 csrf-token。但是当我尝试打印出标题时，我无法获取和存储 csrf-token。此外，浏览器根本不会在存储部分存储 token 。

我需要在这个 cookie 中使用 csrf-token，但我不知道该怎么做？

注意:我无权访问后端代码。

Answer 1

也许您可以使用 axios-cookiejar-support。

https://www.npmjs.com/package/axios-cookiejar-support

一篇介绍如何使用它的媒体文章。

https://medium.com/@adityasrivast/handling-cookies-with-axios-872790241a9b

示例(从登录页面获取 cookie):

const axios = require('axios');
const wrapper = require('axios-cookiejar-support').wrapper;
const CookieJar = require('tough-cookie').CookieJar;

const jar = new CookieJar();
const client = wrapper(axios.create({ jar }));

const url = '<your url>';

const params = new URLSearchParams();
params.append('username', '<username>');
params.append('password', '<password>');
client.post(`${url}/Login`, params, {
  headers: {
    'Accept': '*/*'
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});