在 chrome 应用程序选项卡中使用 axios 请求访问 cookie 的方法答案

【问题标题】：Way to get access to cookies with axios request in chrome application tab在 chrome 应用程序选项卡中使用 axios 请求访问 cookie 的方法
【发布时间】：2021-08-24 06:42:22
【问题描述】：

我正在开发 f/e 页面和 b/e 服务器。

f/e : 反应，本地主机：3000

b/e : 表示，本地主机：80

我还用不同的域托管了两台服务器。

我已使用轴向 b/e 服务器发送请求以获取授权 cookie。我收到了 set-cookie 标头，但在我的应用程序选项卡上看不到它。

我搜索了很多帖子。他们说我应该在 axios 配置中添加一个 withCredentials 选项。而且我还需要在 b/e CORS 设置中添加凭据选项。

所以我把它们都修好了。

但我仍然无法访问 cookie。

顺便说一句，我无法看到或访问 cookie。但是如果我向 B/E 服务器发送请求，cookie 就会正确发送。

我有这个问题好几个月了。请高手帮帮我。

如果需要更多信息，请告诉我。

这是我的代码

// expressjs
app.use(cors({
  origin: true,
  credentials: true,
}));

...
    res.cookie('SID', token, {
      httpOnly: true, secure: true, sameSite: 'None'
    });
    res.cookie('SSID', token, {
      httpOnly: false, secure: true, sameSite: 'None', path: '/'
    });
...

我在使用/不使用默认选项以及使用/不使用内联选项时这样做

//react axios
...
axios.defaults.withCredentials = true;
...

const {status, data} = await axios.post(`${url}/api/blah`, {
  something
}, {withCredentials: 'include'});

Response cookie Chrome application cookie

【问题讨论】：

标签： javascript express cookies axios setcookie

【解决方案1】：

我相信withCredentials 上axios 的正确语法是：

//react axios
//...
axios.defaults.withCredentials = true;
//...

const {status, data} = await axios.post(`${url}/api/blah`, {
  something
}, {withCredentials: true}); // instead of 'include'

我记得有一个问题，axios.defaults.withCredentiasl = true 解决了它，但您可能不想永远保持这种状态，所以我建议您在通话结束后将其设置回 false。另外，the issue 在 axios repo 上看起来是固定的，所以我会尝试在不更改默认值的情况下解决它。

【讨论】：