我正在开发一个前端,使用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的选项,也许可以试试。