Laravel+Vue电商项目：Axios请求重复生成Session ID及CSRF报错

问题背景 #

我用Laravel API搭配Vue.js组件开发电商网站，点击「加入购物车」时，前端发送POST请求到API，需要在CartData表记录用户的session_id，再将商品信息保存到关联的CartItems表中。

核心问题 #

• 每次点击「加入购物车」，请求都会生成新的Session数据，但Blade模板中调用session()->getId()能拿到固定的Session ID。
• CSRF相关：已在bootstrap.js配置Axios，页面header也添加了<meta name="csrf-token" content="{{ csrf_token() }}">，但点击按钮后返回Axios 419错误。尝试执行php artisan session:table并迁移后，控制器中调用$request->session()->getId()抛出「Session store not set on request」异常；给路由添加['middleware' => ['web']]后，依然出现419错误。

相关代码 #

Vue组件的buy方法 #

buy(item) {
    axios.post(
        'api/cart/add',
        {
            product_id: item.id,
            product_data: JSON.stringify(item),
        }).then(
            response => {
                console.log(response);
                toastr.success(item.name + ' added to cart!', 'Success');
            }).catch(error => {
                console.log(error);
                toastr.error('Something went wrong!', 'Error');
            });
},

api.php路由配置 #

Route::group(['middleware' => ['web'], 'controller' => CartController::class], function () {
    Route::post('cart/add', 'addItem');
});

bootstrap.js配置 #

import axios from 'axios';

window.axios = axios;

window.axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
// 注：不管是赋值给window.axios还是直接用axios，这段querySelector都能生效，请求头里也能看到该字段
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

解决方案 #

1. 解决Session ID每次请求重置的问题 #

• Laravel的api.php路由默认使用api中间件组，而web中间件组才负责处理Session、CSRF验证等Web交互功能，避免同时混用两个中间件组。
• 检查config/session.php中的domain和secure配置，确保与当前站点域名匹配，否则Cookie无法正确携带Session ID，导致每次请求生成新Session。
• 前端Axios需要默认携带Cookie，在bootstrap.js中添加：

  window.axios.defaults.withCredentials = true;
  

  同时修改Laravel的config/cors.php配置：

  'supports_credentials' => true,
  

  确保前端请求能正确携带Session Cookie到后端。

2. 解决419 CSRF错误与Session异常 #

• 优先将购物车路由移到web.php中：购物车属于Web端交互场景，web.php默认加载web中间件组（包含Session、CSRF验证），更适配这类需求，无需额外配置中间件。
• 如果坚持使用api.php：
  1. 确保路由组仅使用web中间件，覆盖默认的api中间件：

     Route::group(['middleware' => 'web', 'controller' => CartController::class], function () {
         Route::post('cart/add', 'addItem');
     });
     

  2. 打开浏览器开发者工具，检查请求头中X-CSRF-TOKEN字段是否存在且值与页面meta标签一致。
• 「Session store not set on request」异常是因为请求未经过Session中间件，确认路由确实加载了web中间件组（该组包含StartSession中间件）。

3. 控制器正确获取Session ID #

确保控制器方法注入Illuminate\Http\Request实例，再调用Session方法：

use Illuminate\Http\Request;

public function addItem(Request $request)
{
    $sessionId = $request->session()->getId();
    // 后续逻辑：创建CartData及关联的CartItems
}

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