Laravel与Vue3中API请求头XSRF-TOKEN设置及Laravel8授权异常排查

一、手动设置X-XSRF-TOKEN/X-CSRF-TOKEN的方法 #

如果需要手动在请求头中添加CSRF Token，有两种常见实现方式：

1. 全局配置Axios #

在bootstrap.js或Vue项目入口文件中，从Cookie读取Token并全局配置：

// 原生JS解析Cookie获取XSRF-TOKEN
function getCookie(name) {
    let value = "; " + document.cookie;
    let parts = value.split("; " + name + "=");
    if (parts.length === 2) return parts.pop().split(";").shift();
}

window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
// 全局添加X-XSRF-TOKEN请求头
window.axios.defaults.headers.common['X-XSRF-TOKEN'] = getCookie('XSRF-TOKEN');
// 开启Cookie携带（关键配置，否则Cookie无法传递到后端）
window.axios.defaults.withCredentials = true;

也可以用js-cookie库简化Cookie读取：

import Cookies from 'js-cookie';

window.axios.defaults.headers.common['X-XSRF-TOKEN'] = Cookies.get('XSRF-TOKEN');

2. 单个请求中单独设置 #

在Vue组件的特定请求里直接添加请求头：

import axios from 'axios';

axios.get('/api/user', {
    headers: {
        'X-XSRF-TOKEN': document.cookie.match(/XSRF-TOKEN=([^;]+)/)[1]
    },
    withCredentials: true
})
.then(response => {
    console.log(response.data);
})
.catch(error => {
    console.error(error);
});

二、Laravel 8中Axios自动处理CSRF失效+返回未授权的排查 #

你的bootstrap.js基础配置没问题，但自动处理失效且返回“未授权”，可以按以下步骤逐一排查：

1. 确认XSRF-TOKEN Cookie已生成 #

打开浏览器开发者工具 → Application → Cookies，检查是否存在XSRF-TOKEN：

• 如果没有：
  • 若请求Web路由：确保路由在web中间件组下（Laravel默认web中间件包含AddHttpCookie，自动生成该Cookie）
  • 若请求API路由：在app/Http/Kernel.php的api中间件组中添加\Illuminate\Cookie\Middleware\AddHttpCookie::class，让API路由也生成CSRF Cookie。

2. 开启Axios的withCredentials #

Axios默认不会携带Cookie，这是自动读取Token失效的核心原因，在bootstrap.js中补充配置：

window.axios.defaults.withCredentials = true;

3. 检查CORS配置（跨域场景） #

如果前后端分离跨域，需在config/cors.php中开启凭证支持：

return [
    'paths' => ['api/*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['http://你的前端域名'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    // 必须设为true，否则跨域时Cookie无法传递
    'supports_credentials' => true,
];

4. 区分“CSRF验证失败”和“未授权” #

返回“未授权”（unauthorized）不一定是CSRF问题，也可能是认证失败：

• 如果用Laravel Sanctum：需要先调用/sanctum/csrf-cookie接口获取CSRF Cookie，再发起登录请求，后续请求才能携带认证Cookie
• 确保受保护的路由使用了正确的认证中间件（比如auth:sanctum），且用户已成功完成登录

内容的提问来源于stack exchange，提问作者Tukei David