axios 获取不到 set-cookie

axios 获取不到 set-cookie

概述

在使用 axios 进行网络请求时，有时候我们需要获取服务器返回的 cookie 信息，方便后续的请求使用。然而，有时候我们会发现 axios 并不能正确获取到服务器返回的 set-cookie 字段。本文将详细介绍这个问题的原因以及解决方案。

问题原因

axios 是一个基于 Promise 的 JavaScript HTTP 客户端，是用于浏览器和 Node.js 的。它可以很方便地发送 HTTP 请求，并处理响应数据。然而，由于浏览器的安全机制，跨域请求中的 set-cookie 字段默认是不允许被前端代码访问的。这就导致了 axios 在默认情况下无法获取到服务器返回的 set-cookie 字段。

解决方案

解决这个问题的方法有两种：一种是使用服务器端设置响应头的方式，另一种是使用 axios 的配置项。

1. 使用服务器端设置响应头

服务器端可以通过设置响应头中的 "Access-Control-Expose-Headers" 字段，来允许前端代码访问特定的字段。具体操作如下：

// Node.js
app.use(function(req, res, next) {
  res.setHeader('Access-Control-Expose-Headers', 'set-cookie');
  next();
});

// Java
response.addHeader("Access-Control-Expose-Headers", "set-cookie");

这样，服务器端就会在响应头中明确告知浏览器允许访问 set-cookie 字段，从而可以通过 axios 获取到服务器返回的 cookie 信息。

2. 使用 axios 的配置项

axios 提供了一个名为 "withCredentials" 的配置项，可以让前端代码获取跨域请求中的 cookie 信息。具体操作如下：

axios.get(url, { withCredentials: true })
  .then(response => {
    console.log(response.headers['set-cookie']);
  })
  .catch(error => {
    console.error(error);
  });

通过设置 "withCredentials" 为 true，axios 将会在发送请求时携带跨域请求中的 cookie 信息。这样，我们就可以通过 response.headers['set-cookie'] 来获取服务器返回的 cookie 信息了。

示例

const axios = require('axios');

axios.get(' { withCredentials: true })
  .then(response => {
    console.log(response.headers['set-cookie']);
  })
  .catch(error => {
    console.error(error);
  });

总结

axios 在默认情况下无法获取到服务器返回的 set-cookie 字段，是因为浏览器的安全机制限制了前端代码对跨域请求中的 set-cookie 字段的访问。为了解决这个问题，我们可以通过服务器端设置响应头或者使用 axios 的配置项来获取 cookie 信息。使用服务器端设置响应头可以允许前端代码访问特定的字段，而使用 axios 的配置项可以让前端代码获取跨域请求中的 cookie 信息。选择合适的方法来解决这个问题，可以根据具体的项目需求和实际情况进行决策。

参考链接： [axios GitHub repository](