Vue+Quasar SPA对接Laravel Sanctum时Axios未携带X-XSRF-TOKEN如何解决

问题根本原因 #

Axios默认仅对同域请求自动附加X-XSRF-TOKEN请求头，跨域场景下会跳过该逻辑，即使你已经开启withCredentials: true也不会自动携带令牌，这是你遇到问题的核心原因。

解决方案（按优先级排序） #

方案1：添加Axios强制携带XSRF令牌配置 #

如果你的Axios版本 >= 0.27.0，可以直接通过内置配置强制所有请求都携带XSRF头，修改你的Axios初始化代码即可：

import Vue from 'vue';
import axios from 'axios';

Vue.prototype.$axios = axios;

const apiBaseUrl = "https://someweburl.com";
const api = axios.create({ 
  baseURL: apiBaseUrl,
  withCredentials: true,
  // 新增以下3行配置
  xsrfCookieName: 'XSRF-TOKEN',
  xsrfHeaderName: 'X-XSRF-TOKEN',
  withXSRFToken: true // 强制跨域请求也携带XSRF头
});

Vue.prototype.$api = api;
Vue.prototype.$apiBaseURL = apiBaseUrl;

export { axios, api, apiBaseUrl }

该方案无需修改后端配置，也不需要调整请求逻辑，修改后直接测试即可。

方案2：配置开发环境代理（适用于低版本Axios） #

如果你的Axios版本较低无法使用withXSRFToken配置，可以通过Quasar本地开发代理把请求转为同域，解决跨域Cookie读取限制：

1. 修改quasar.conf.js中的开发服务配置，添加代理规则：

module.exports = configure(function (ctx) {
  return {
    devServer: {
      port: 8080,
      proxy: {
        '/sanctum': {
          target: 'https://someweburl.com',
          changeOrigin: true,
          secure: true
        },
        '/api': {
          target: 'https://someweburl.com',
          changeOrigin: true,
          secure: true
        }
      }
    }
    // 其余配置保持不变
  }
})

2. 修改Axios配置中的apiBaseUrl为空字符串，所有请求都会走本地代理转发到后端，自动变为同域请求，Axios会正常携带XSRF头。

方案3：优化异步请求逻辑（可选） #

你的请求方法虽然时序没有问题，但async搭配.then的写法容易出现嵌套错误，建议统一用async/await写法：

export const fetchAllEvents = async function (context, payload) {
  try {
    // 先获取CSRF令牌
    await this._vm.$api.get('/sanctum/csrf-cookie')
    // 再发起业务请求
    const response = await this._vm.$api.post('/api/website/event/all')
    context.commit('setAllEvents', response.data.data)
  } catch (error) {
    console.log(error)
  }
}

内容的提问来源于stack exchange，提问作者Ahmed Raza