SPA场景下Laravel后端设置Cookie后Axios请求不生效问题求解

核心原因说明 #

Postman、Insomnia等接口调试工具不受浏览器同源策略限制，会自动接收存储响应携带的Cookie，Axios在浏览器环境下受跨域规则约束，需要前后端配合配置才能正常读写Cookie。

前端Axios必填配置 #

开启跨域请求携带/接收Cookie的开关，有两种配置方式：

• 全局配置（所有请求都生效）

axios.defaults.withCredentials = true;

• 单请求单独配置

axios.get('你的接口地址', {
  withCredentials: true
})

后端Laravel必填配置 #

Laravel 7+默认使用fruitcake/laravel-cors处理跨域，修改config/cors.php文件对应参数：

• supports_credentials设置为true
• allowed_origins不能设置为通配符*，必须填写你的SPA前端完整域名，例如本地开发填['http://localhost:5173']，生产环境填['https://你的线上前端域名']
• 如果是自定义实现的CORS中间件，需要手动增加两个响应头：

header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Origin: 你的前端完整域名');

可选校验项 #

如果上面配置完成还是无法正常设置Cookie，可以检查以下参数：

• 确认Cookie的domain属性匹配前后端的根域名，前后端使用不同子域名时，建议在设置Cookie时指定根域名，例如：

return response()->json([])->cookie(
    'cart_token', '123abc', 60, '/', '.你的根域名.com'
);

• 确认Cookie的SameSite属性符合运行环境要求：本地HTTP开发环境建议设置为lax，HTTPS生产环境如果有跨站需求可以设置为none同时开启secure属性
• 若使用Laravel Sanctum做身份认证，需要先请求/sanctum/csrf-cookie接口初始化Cookie，再调用业务接口

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