Chrome浏览器甚至不允许来自同一子域的Set-Cookie

编程问答 2022-06-10

问题描述

这是我的配置：

服务器

使用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的投诉）：

enter image description here

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

我在这里想念什么？

解决方法

我最近设置了完全相同的东西（带有Sanctum的Laravel 8后端+单独的Vue前端），并且可以正常工作。

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

在Vue端，请确保在axios实例中启用withCredentials，例如

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

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

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

,

最后使它正常工作。对于任何未来的读者来说，这里都是：

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