withCredentials axios 在 Chrome 中不起作用



我正在开发一个前端,使用reactJs和axios从用PHP Laravel开发的api中获取信息。

后端登录部分分为两个步骤:

  • 1-我在第一个路由中发送用户和密码,它会给我一个令牌;-这部分正在工作。

  • 2-我将步骤一中请求的令牌放在Berear中,并向第二条路由发送双因素身份验证码;-这部分也在中工作

但是,经过身份验证后,我无法再从服务器访问任何私有路由。然后我注意到需要用Credentials设置它:在我创建axios实例时为true(这是必要的,因为从我读到的内容来看,这个设置会自动在前面和后面交换cookie(。

所以我的代码看起来是这样的:

export const api = axios.create({
baseURL: 'https://myserver.net.br/api',
withCredentials: true,
})

当我使用Firefox测试我的前端时,上面的配置非常有效。但当使用Chrome或Edge时,它不起作用。

我在论坛上发现问题可能是因为我正在运行localhost:3000 front(我觉得没有多大意义,因为它在Firefox中可以工作(,所以我尝试使用127.0.0.1:3000,甚至编译了front并将其放在托管服务器上,但它仍然不起作用。当我在Chrome或Edge中运行前端时,我无法访问后端路由。

有人经历过这种情况吗?你能帮我吗?我已经在这件事上被打了三天多了!:(

注意:当我通过postMan和Insomia请求路由时,它们也能工作,所以这意味着backEnd上的CORS设置是正确的。

服务器和客户端使用不同的端口吗?如果是这样的话,也许你的问题和我刚刚遇到的问题是一样的。

你的Chrome和Edge保存cookie吗?如果没有,可能是因为浏览器强制使用samesite作为默认值。

如果你使用express作为后端,也许可以尝试这样做:

return res
.cookie("access_token", token, {
httpOnly: true,
secure: true,
sameSite: "none",
})
.json({your_data...});

我还是一个新手,只是遇到了同样的问题,所以如果我误解了这个问题,请解释。

编辑:我刚刚意识到你说你在使用PHP,所以如果有关于在cookie中添加SameSite=None的选项,也许可以试试。

相关内容

  • 没有找到相关文章

最新更新