withCredentials axios 在 Chrome 中不起作用答案

【问题标题】：withCredentials axios doesn't work in ChromewithCredentials axios 在 Chrome 中不起作用
【发布时间】：2022-01-16 21:20:22
【问题描述】：

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

后端登录部分分两步进行：

1 - 我在第一条路由中发送用户名和密码，它返回给我一个令牌； - 这部分工作正常。
2 - 我将第一步中请求的令牌放在 Berear 中，并向第二条路由发送双因素验证码； - 这部分也有效

但是，在通过身份验证后，我无法从我的服务器访问更多私有路由。然后我注意到需要在创建 axios 实例时将其设置为 withCredentials: true （这是必要的，因为据我所知，此设置会自动在前后交换 cookie）。

所以我的代码看起来像这样：

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

当我使用 Firefox 测试我的前端时，上述配置非常有效。但是当使用 Chrome 或 Edge 时，它就不起作用了。

我在论坛上发现问题可能是因为我正在运行我的 localhost:3000 前端（我看不出有多大意义，因为它适用于 Firefox），所以我尝试使用 127.0.0.1:3000 和甚至把前面编译好放到服务器托管上，还是不行。当我在 Chrome 或 Edge 中运行 front 时，我无法访问后端路由。

有没有人遇到过这种情况，你能帮我吗？我已经被打了3天多了！ :)

注意：当我通过 postMan 和 Insominia 请求路由时，它们也可以工作，所以这意味着后端的 CORS 设置是正确的。

【问题讨论】：

标签： reactjs axios cross-domain

【解决方案1】：

您是否为服务器和客户端使用不同的端口？如果是这样，也许您的问题与我刚刚遇到的问题相同。

您的 Chrome 和 Edge 是否保存 cookie？如果不是，可能是因为浏览器强制默认使用相同站点。

如果您使用 express 作为后端，可能会尝试执行以下操作：

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

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

编辑：我刚刚意识到你说你使用的是 PHP，所以如果有一些关于将 SameSite=None 添加到 cookie 的选项，也许可以试试。

【讨论】：