本地运行React应用接收跨域Laravel服务Set-Cookie头部被拦截如何解决

你遇到的Cookie拦截错误核心是后端返回的Cookie domain和后端实际部署的域名不匹配：你将SESSION_DOMAIN设为了localhost，但你的Laravel应用实际部署在Vapor（AWS Lambda）的公网域名下，浏览器校验时发现请求的后端域名不是localhost，自然会拦截domain为localhost的Cookie。

1. 修正SESSION_DOMAIN配置 #

SESSION_DOMAIN的取值是你部署Laravel应用的Vapor域名，而非前端本地域名：

• 如果你用的是Vapor默认的Lambda域名，格式类似xxx.lambda-url.us-east-1.on.aws，则配置为：

SESSION_DOMAIN=.xxx.lambda-url.us-east-1.on.aws

• 如果你给Vapor应用绑定了自定义域名，比如api.yourdomain.com，则配置为：

SESSION_DOMAIN=.yourdomain.com

注意开头的点代表匹配该域名下的所有子域名，如果你没有跨子域需求可以省略

2. 修正跨域和Sanctum配置 #

保持你的前端地址在白名单中，同时补充后端域名到Sanctum状态域配置：

# 前端本地地址保持不变
CORS_ALLOWED_ORIGINS=http://localhost:3000
SANCTUM_STATEFUL_DOMAINS=localhost:3000,xxx.lambda-url.us-east-1.on.aws

同时确保config/cors.php中supports_credentials设为true：

'supports_credentials' => true,

3. 修复SameSite配置不生效问题 #

Vapor部署时会优先读取.env中的会话配置，你不需要修改session.php文件，直接在.env中添加以下配置即可：

SESSION_SECURE=true
SESSION_SAME_SITE=none

注意SameSite=None必须配合Secure=true使用，否则浏览器会强制回退为Lax，这就是你之前修改session.php不生效的原因

4. 前端请求配置调整 #

发送请求时必须开启携带凭证的配置：

• Axios请求全局配置：

axios.defaults.withCredentials = true

• Fetch API调用配置：

fetch(url, {
  credentials: 'include'
})

临时本地开发替代方案 #

如果你不想调整线上配置，可以修改本地hosts文件，给前端和后端分配同一根域名下的不同子域名，比如：

127.0.0.1 app.localhost
127.0.0.1 api.localhost

此时前端访问app.localhost:3000，后端SESSION_DOMAIN设为.localhost即可正常传递Cookie。

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