Laravel 8+Vue SPA调用POST接口提示方法不支持，CSRF Token如何正确配置？

1. 修复路由前缀重复问题 #

Laravel 中routes/api.php内定义的所有路由会自动被框架添加/api前缀，你当前的路由定义：

Route::post('api/authenticate', [LoginController::class, 'authenticate']);

实际可访问路径为/api/api/authenticate，和前端请求的/api/authenticate不匹配，这是你收到POST方法不支持报错的核心原因。
修改路由定义为：

Route::post('authenticate', [LoginController::class, 'authenticate']);

即可让实际路由和前端请求路径对齐。

2. 修复axios传参结构问题 #

你当前UsersService.js里的请求写法，把表单参数额外包了一层对象，后端无法直接读取对应字段：

// 错误写法，参数结构为 {formData: {email:xxx, password:xxx}}
return axios.post('api/authenticate', { formData })

修改为直接传递表单数据：

// 正确写法，参数结构为 {email:xxx, password:xxx}
return axios.post('api/authenticate', formData)

3. 正确配置axios全局CSRF参数 #

不需要手动把_token塞到表单参数里，在项目前端入口文件（如main.js/bootstrap.js）全局配置axios默认请求头即可：

import axios from 'axios'

axios.defaults.withCredentials = true
// 配置全局CSRF请求头
axios.defaults.headers.common['X-CSRF-TOKEN'] = window.AppSettings.csrfToken
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'

4. 配合Sanctum规则初始化CSRF Cookie #

如果使用Sanctum做SPA认证，需要在发起登录请求前先请求sanctum/csrf-cookie接口初始化CSRF凭证，修改登录方法：

async login(){
  // 先初始化CSRF Cookie
  await axios.get('/sanctum/csrf-cookie')
  const res = await UsersService.authenticate(this.formData)
  console.log(res)
}

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