Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/laravel/10.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Laravel Chrome不允许从同一(子)域设置Cookie_Laravel_Vue.js_Cookies_Csrf_Laravel Sanctum - Fatal编程技术网

Laravel Chrome不允许从同一(子)域设置Cookie

Laravel Chrome不允许从同一(子)域设置Cookie,laravel,vue.js,cookies,csrf,laravel-sanctum,Laravel,Vue.js,Cookies,Csrf,Laravel Sanctum,以下是我的配置: 服务器 Laravel8应用程序,使用Sanctum提供对RESTAPI的访问。它被配置为在http://b8/ 客户端 使用基于会话的cookie身份验证方法连接到API的单独Vue CLI 3.0 SPA。我已将Vue CLI Serve配置为在http://app.b8/ 问题 即使服务器和客户端位于同一个域上,Chrome也不允许设置Cookie操作。在阅读了几篇文章之后,我已经在Postman中成功地运行了它,但是在浏览器中运行的真正的Vue应用程序无法设置Sanct

以下是我的配置:

服务器

Laravel8应用程序,使用Sanctum提供对RESTAPI的访问。它被配置为在
http://b8/

客户端

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

问题

即使服务器和客户端位于同一个域上,Chrome也不允许设置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对于当前域无效,因此没有设置cookie。这是Sanctum令牌调用返回后开发工具窗格的Cookies选项卡(显示Chrome投诉的工具提示):

由于未设置cookie,以下登录调用将失败,并出现
419
错误


我在这里遗漏了什么?

我最近设置了完全相同的东西(带有Sanctum+独立Vue前端的Laravel 8后端),并且它正在工作

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

在Vue端,确保在
axios
实例中启用,例如

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

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

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

终于让它工作了。对于未来的读者,以下是一些事情:

  • 我犯的第一个错误是使用了一个单词主机名。看起来Chrome(或Sanctum,不确定)希望主机名中至少有一个句号。所以我把它从
    b8
    改为
    b8.cod
  • 您应该将
    相同的\u站点
    属性设置为
    lax
    <代码>无是一个相当危险的值。Chrome现在显示
    none
    是一个潜在问题
  • SESSION\u DOMAIN
    应设置为
    .b8.cod
    ,并带有一个前导周期,以支持前端子域,正如文档正确建议的那样
  • 所有其他事情都应该按照问题中的建议去做
    axios
    必须使用
    和凭据
    设置为
    true

  • 谢谢我取得了一些进展。必须将
    相同站点
    配置设置为
    none
    ,而不是
    lax
    。Chrome现在接受
    XSRF令牌
    cookie,并且不会阻止它。然而,我现在陷入了下一步,
    axios
    似乎没有在
    X-XSRF-Token
    头中自动发送此cookie,即使
    withCredentials
    配置设置为
    true
    。这目前导致
    419
    ,这是预期的,因为Sanctum需要请求中的
    X-XSRF-Token
    头。使用
    同一站点
    none
    可能是错误的方法,因为它对我来说使用的是
    lax
    。您是否在
    config/cors.php
    中设置了
    'supports_credentials'=>true
    ?是的,但Chrome继续阻止我的cookie,直到我将其设置为
    none
    。同样奇怪的是,
    SESSION\u DOMAIN=.b8
    对我来说不起作用,但是
    SESSION\u DOMAIN=b8
    (没有前导周期)却起作用,这不是文档建议的。我最终解决了这个问题。我会很快发布我的答案。非常感谢您的输入。@dotNET,请发布您的答案以拯救灵魂。。提前谢谢