2

这是我的配置：

服务器

Laravel 8 应用程序使用 Sanctum 提供对 REST API 的访问。它被配置为运行在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 令牌调用返回后 Dev Tools 窗格的 Cookies 选项卡（显示 Chrome 投诉的工具提示）：

在此处输入图像描述

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

我在这里想念什么？

4

2 回答 2

2

终于让它工作了。对于任何未来的读者，这里有一些东西：

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

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

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

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

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

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

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

于 2020-10-04T17:46:12.353 回答