即使来自同一个（子）域，Chrome 也不允许 Set-Cookie

Question

这是我的配置：

服务器

使用 Sanctum 提供对 REST API 的访问的 Laravel 8 应用程序。它被配置为在http://b8/上运行

客户

一个单独的 Vue CLI 3.0 SPA，它使用基于会话的 cookie 身份验证方法连接到 API。我已将 Vue CLI Serve 配置为在 http://app.b8/ 运行它。

问题

即使服务器和客户端在同一个域上，Chrome 也不允许 Set-Cookie 操作。翻阅了几篇帖子和文章后，我在Postman中成功运行了，但是在浏览器中运行的真正的Vue应用程序无法设置Sanctum cookie，因此无法登录。

这是我的配置：

.env

SESSION_DRIVER=cookie
SESSION_DOMAIN=.b8
SANCTUM_STATEFUL_DOMAINS=localhost,localhost:8080,127.0.0.1,127.0.0.1:8000,::1,b8,app.b8,app.b8:8080

vue.config.js

...
devServer: {
    proxy: "http://b8/api/v1", 
    host: "app.b8"
},

Vue 应用中的登录功能

async login(context, credentials) {
    axios.get('http://b8/sanctum/csrf-cookie').then(response => {
        axios.post('http://b8/login', credentials).then(response2 => {
          //successfully logged in.
        });
    });            
},

错误信息

/sanctum/csrf-cookie 路由的外部调用成功返回并带来 Sanctum cookie。但是，Chrome 认为 cookie 对当前域无效，因此没有设置它。这是 Sanctum 令牌调用返回后开发工具窗格的 Cookies 选项卡（显示 Chrome 投诉的工具提示）：

由于未设置 cookie，因此以下 login 调用失败并出现 419 错误。

我在这里错过了什么？

Answer 1

终于搞定了。对于任何未来的读者，这里有一些东西：

1. 我犯的第一个错误是使用单个单词的主机名。看起来 Chrome（或 Sanctum，不确定）希望您在主机名中至少有一个句点。所以我把它从b8改成了b8.cod。
2. 您应该将same_site 属性设置为lax。 none 是一个相当危险的值。 Chrome 现在将none 显示为潜在问题。
3. SESSION_DOMAIN 应设置为 .b8.cod，并带有前导句点以支持前端子域，正如文档中正确建议的那样。
4. 所有其他事情都应该按照问题中的建议进行。 axios 必须使用 withCredentials 设置为 true。

Answer 2

我最近设置了完全相同的东西（Laravel 8 后端与 Sanctum + 单独的 Vue 前端）并且它正在工作。

您的服务器端设置看起来不错。请仔细检查前端的 IP 是否确实包含在您的 SANCTUM_STATEFUL_DOMAINS 中 - 这有时会导致我出现 419 错误。

在 Vue 方面，确保在 axios 实例中启用 withCredentials，例如

const baseDomain = "http://localhost"
const baseURL = `${baseDomain}/api`

export default axios.create({
    baseURL,
    withCredentials: true,
})

如果提供的建议没有帮助，我可以通过向您展示更多我的工作后端代码来进一步扩展我的答案。