Set-Cookie 无法通过 axios 或 fetch 访问答案

【问题标题】：Set-Cookie not accessible through axios or fetchSet-Cookie 无法通过 axios 或 fetch 访问
【发布时间】：2020-10-15 22:40:30
【问题描述】：

我正在构建一个带有 go 后端和 vue.js 前端的 Web 应用程序。我想做一个简单的登录表单，在其中我使用 Axios（或 fetch）从我的组件的方法发送登录请求，并在响应中获取用户的 JSON 对象和要存储的 cookie 中的会话令牌和在以后对服务器的请求中重用。

我的组件方法的代码：

class LoginComponent extends Vue {
  sendLogin (): void {
    axios.post<User>('http://192.168.1.227:8080/signin', body)
      .then(res => console.log('Axios Response :', res)
      .catch(err => console.error('Axios Error :', err))
  }
}

go server 部分代码： go API 带有标题： go headers

前端和后端位于本地网络中的不同 IP 地址上，它们通过 HTTP 进行通信。

我面临的问题是，在发布登录请求后收到响应时，我无权访问服务器设置的 cookie。当我使用 Axios 分析响应时，cookie 不在标头中，而当我在浏览器中查看网络日志时，cookie 在标头中，但没有保存，并且在我执行另一个请求时也没有发送。

此外，在 Axios 中唯一可见的标头是 Content-Type : application/json; charset=UTF-8

我尝试了很多方法才能看到这个 cookie，但它不起作用：

在 axios 请求中添加 { withCredentials: true } 或在 axios 实例中添加 axios.defaults.withCredentials = true 只会停止请求，因为 CORS。
将所有 Access-Control 标头更改为 "*" 并没有改变任何内容
在 axios 选项中使用 { auth: { username: 'foo', password: 'bar' } } 而不是正文

唯一有效并自动保存 cookie 的方法是通过表单 html 标记的属性发送请求，如下所示：

<form method="POST" action="http://192.168.1.227/signin">
  ...
</form>

但是通过这种方式，我被重定向到 JSON 响应对象，而不是来自 vue-router 的路由之一，并且我无法在我的应用程序中访问 User 对象。

有什么办法可以解决我的问题吗？

【问题讨论】：

听起来你有几个问题，但如果 cookie 在响应中，那么你的问题不在于 Go 或服务器。注意 Fetch 默认不发送 cookie：developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
是的，这也是我的想法，如果我在网络日志中获得了 cookie，那么服务器就完成了它的工作。但是我只能从Axios的响应中读取一个标头而不是Set-Cookie这一事实真的很奇怪，我想也许是浏览器过滤了cookie，因为它是一个跨域请求
您应该以正确的方式配置 CORS 以使用 cookie。请记住，您必须使用实际域而不是通配符。 Access-Control-Allow-Origin: * 和 withCredentials=true 的任何组合都将失败。

标签： vue.js http axios fetch

【解决方案1】：

好的，Зелёный 的评论就是答案。

我需要 go 服务器设置Access-Control-Allow-Origin: http://192.168.1.218:8080（前端的地址），然后用{ withCredentials: true } 配置 axios 以便能够自动存储 cookie。虽然我在 axios 响应上做 console.log 时仍然看不到它，但它已成功存储并在每次调用服务器时重复使用。

【讨论】：