Laravel向Vue SPA发送Cookie后浏览器未存储，求解决方案及端口处理

你遇到的是典型的跨域场景下Cookie无法被浏览器保存的问题，咱们一步步拆解原因和解决方案：

核心问题分析 #

1. 前端Axios未开启凭证携带 #

默认情况下，Axios在跨域请求时不会主动携带Cookie，也不会存储服务器返回的Cookie。你需要给请求加上withCredentials: true配置：

axios.post('//backend.local/api/login', {}, {
  withCredentials: true // 必须开启这个选项
})
.then(response => {
  console.log(response)
}).catch(error => { })

2. 后端Laravel缺少允许凭证的响应头 #

从你贴出的响应头可以看到，没有Access-Control-Allow-Credentials: true这个关键头。浏览器有严格的跨域安全规则：如果前端请求携带凭证，后端必须明确返回这个头，否则浏览器会直接拒绝保存Cookie。

修改你的Laravel测试路由，添加这个响应头：

Route::post('login', function () {
    setcookie("name", 'value', time()+3600, "/", ".local");
    return response('ok')
        ->header('Access-Control-Allow-Credentials', 'true'); // 新增这个头
});

另外要注意：Access-Control-Allow-Origin不能设为*，必须是具体的前端域名（你现在设置的http://frontend.local:8080是正确的，通配符会和凭证规则冲突）。

3. Cookie的Domain设置可能存在本地环境适配问题 #

你把Cookie的domain设为.local，但部分浏览器对.local这类自定义顶级域的解析和匹配逻辑比较严格。要确保frontend.local:8080和backend.local都属于.local主域下，浏览器才会识别并保存这个Cookie。

关于端口号的疑问 #

其实完全不需要移除端口号，只要满足以下条件，带端口的域名也能正常跨域共享Cookie：

• 前端请求开启withCredentials: true
• 后端返回Access-Control-Allow-Credentials: true，且Access-Control-Allow-Origin是带端口的具体前端域名（比如http://frontend.local:8080）
• Cookie的domain设置覆盖前端的主域（比如.local，这样不管前端用什么端口，只要主域匹配就能生效）

如果你确实想去掉端口，可以把Vue开发服务器的端口改成80（HTTP默认端口），修改Vue项目的vue.config.js（Vue CLI项目）：

module.exports = {
  devServer: {
    port: 80
  }
}

改完重启服务后，就能用http://frontend.local访问了，前提是本地80端口没被其他服务占用。

验证步骤 #

调整配置后，按以下步骤确认：

1. 重新发起登录请求，在浏览器开发者工具的Network标签里，检查请求头是否包含Cookie字段（后续请求会自动携带），响应头是否有Access-Control-Allow-Credentials: true
2. 切换到Application标签，查看Cookies下的backend.local或.local域，应该能看到name这个Cookie了

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