Vue通过axios请求Laravel Api路由时出现CSRF Token不匹配错误如何解决？

关于为什么api路由需要配置web中间件 #

Laravel 框架默认的中间件分组定义在 app/Http/Kernel.php 中：

• api 中间件组默认设计为无状态接口使用，没有加载 StartSession 等 Session 相关的中间件，所以直接使用api中间件的话请求实例没有绑定Session存储，就会抛出 Session store not set on request. 错误
• web 中间件组包含了Session启动、CSRF校验、Cookie加密等你需要用到的功能，所以要基于Session存储购物车，必须给对应路由加web中间件

419 CSRF token mismatch错误解决方案 #

错误的根本原因是前后端跨域请求下，axios默认不会自动携带服务端返回的Cookie，导致你调用get-token接口的Session和后续POST请求的Session不是同一个，所以提交的_token和当前Session里存的token不匹配。Insomnia会自动存储同域名下的Cookie，所以两次请求属于同一个Session，校验可以通过。

具体修改步骤 #

1. 配置axios开启跨域凭证携带
   在你的axios初始化位置（比如main.js）添加全局配置：

import axios from 'axios'
// 配置接口基础地址，后续请求不用每次写全域名
axios.defaults.baseURL = 'http://localhost:8000/api'
// 开启跨域请求携带Cookie
axios.defaults.withCredentials = true

注意：Access-Control-Allow-Credentials 是后端返回的响应头，不需要你在前端请求头里手动添加，加了反而会导致跨域错误。

2. 修改Laravel跨域配置
   打开 config/cors.php 修改以下配置项：

return [
    'paths' => ['api/*'],
    'allowed_methods' => ['*'],
    // 不能用通配符*，必须指定前端地址
    'allowed_origins' => ['http://localhost:9000'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    // 开启跨域凭证支持
    'supports_credentials' => true,
];

修改后执行命令清理配置缓存：

php artisan config:cache

3. 简化你的axios请求代码
   手动设置multipart/form-data请求头会导致axios无法自动生成请求边界参数，直接删除手动写的headers配置即可，修改后代码如下：

axios.get('/get-token').then(response => {
    const _token = response.data._token
    const bodyFormData = new FormData()
    bodyFormData.append('product_id', product.id)
    bodyFormData.append('amount', 1)
    bodyFormData.append('_token', _token)

    axios({
      method: "post",
      url: '/v1/cart',
      data: bodyFormData,
    }).then((res) => {
      console.log('res',res)
    }).catch((err) => {console.log(err)})
}); 

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