未设置 Cookie，因为域 url 不匹配

Question

我有 laravel 后端和 Next.js 前端托管在 vercel 上。他们的链接是这样的：

• 前端.vercel.app
• 后端.vercel.app

前端请求cookie但无法设置。如果我将鼠标悬停在图片右侧的错误图标上，它会显示“此尝试通过 Set-Cookie 标头设置 cookie 被阻止，因为其域属性对于当前主机 url 无效”

这是我的后端环境：

SESSION_DOMAIN=.vercel.app
SANCTUM_STATEFUL_DOMAINS=frontend.vercel.app
SESSION_SAME_SITE=none
SESSION_SECURE_COOKIE=true
SESSION_HTTP_ONLY=true

我已经尝试过

SESSION_DOMAIN=*.vercel.app

，但也没成功。

我可以使用

.vercel.app

作为会话域吗？或者这还有什么问题吗？

Answer 1

您遇到的错误与跨域 cookie 设置和 cookie 中的 SameSite 属性有关。当您的前端 (frontend.vercel.app) 向后端 (backend.vercel.app) 发出请求时，您实际上是在处理跨域请求。为了让 cookie 在此设置中工作，您需要在 Laravel 后端中设置一些特定配置。

以下是如何配置 Laravel 后端以与 Vercel 上托管的 Next.js 前端配合使用：

CORS 配置： 确保您的 Laravel 后端配置为允许来自前端域的跨源请求。您可以使用 barryvdh/laravel-cors 包或 Laravel 的内置 CORS 支持来设置这些规则。

在您的 CORS 配置中，允许来自 frontend.vercel.app 的请求：

'paths' => ['api/*', 'sanctum/csrf-cookie'],
'allowed_origins' => ['https://frontend.vercel.app'],
'supports_credentials' => true,
Session Configuration:

您的 SESSION_DOMAIN 应设置为 frontend.vercel.app，因为它是请求发起的前端域。

将 SESSION_SECURE_COOKIE 设置为 false 以进行开发，以允许通过 HTTP 进行 cookie，并在应用程序使用 HTTPS 时将其设置为 true 以进行生产。

SESSION_SAME_SITE 可以设置为“none”以允许跨站点 cookie。

SESSION_HTTP_ONLY 应设置为 true 以确保 cookie 只能通过 HTTP 访问。

确保清除 Laravel 应用程序缓存或重新启动服务器以应用这些更改。

Vercel 配置：

确保您的 Vercel 部署具有正确的前端应用程序设置：

在您的 Vercel 设置中，将 Cookie 的“SameSite”属性的“安全”设置为“允许”。

确保您的前端应用程序使用 HTTPS。

测试：测试前清除浏览器中的 Cookie 和缓存，以确保旧的 Cookie 设置不会干扰。

完成这些配置后，您的 Laravel 后端应该能够为来自 Vercel 上的 Next.js 前端的请求设置和读取 cookie。确保您的更改正确部署到 Laravel 后端和 Vercel 托管的前端，以使这些配置生效。

我前段时间实现了这个并且它有效，我使用了 Laravel 5.6 版本