axios crsf token 请求头配置

Axios 是一个基于 promise 的 HTTP 客户端，用于浏览器和 node.js 环境，它适用于各种不同的环境。对于在使用 Axios 发起 HTTP 请求时需要携带 CSRF Token 的情况，通常需要在请求头中加入一个自定义的头信息，以便服务器识别并验证请求的合法性。

以下是在 Axios 中配置请求头携带 CSRF Token 的步骤：

1. 首先确保你已经在服务器端设置了 CSRF 验证，并且服务器会返回一个 CSRF Token。Token 通常通过响应头、Cookie 或者作为响应体的一部分返回给客户端。

2. 在客户端，你需要在发起请求之前获取这个 Token，并将其存储在合适的位置，比如一个变量中或在本地存储中。

3. 使用 Axios 发起请求时，你可以使用 `axios.interceptors.request.use` 方法来全局配置请求头，或者在发起单个请求时直接配置请求头。下面是一个配置全局请求头的示例：

// 引入 axios
import axios from 'axios';

// 获取 CSRF Token，这里假设 Token 存储在本地存储中
const csrfToken = localStorage.getItem('csrfToken');

// 全局配置请求头
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么，比如添加 CSRF Token 到请求头中
    if (csrfToken) {
        config.headers['X-CSRF-Token'] = csrfToken;
    }
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 现在每次使用 axios 发送请求时，都会自动携带 X-CSRF-Token
axios.get('/api/data').then(response => {
    console.log(response.data);
});

4. 如果你只是想在某个特定的请求中添加 CSRF Token，可以直接在请求配置中添加：

axios.get('/api/data', {
    headers: {
        'X-CSRF-Token': csrfToken // 在这里直接将 CSRF Token 添加到请求头中
    }
}).then(response => {
    console.log(response.data);
});