vue.js 和 axios 使用但无法在 response.headers 中接收 set-cookie

Posted

技术标签:

【中文标题】vue.js 和 axios 使用但无法在 response.headers 中接收 set-cookie【英文标题】:vue.js and axios using but unable to receive set-cookie in response.headers 【发布时间】:2020-06-12 10:35:12 【问题描述】:

我尝试从 Vue js coreui 主题调用外部 api,但无法在 response.headers 中接收 set-cookie

代码如下

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
  axios.defaults.headers.common['Access-Control-Allow-Credentials'] = true;
  axios.defaults.headers.common['Access-Control-Allow-Origin'] = 'http://127.0.0.1:8000';
  axios.defaults.headers.common['Access-Control-Allow-Headers'] = 'X-PINGOTHER, Content-Type';
  axios.defaults.headers.common['Access-Control-Expose-Headers'] = 'Access-Token, Uid';
  axios.defaults.headers.common['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS';
    axios
    .post('url', 
    
        par : '20'
    , 
        withCredentials: true,
        )
    .then(function(response)
      console.log(response);
    )
    .catch(error => console.log(error))

我都试过了

axios.defaults.headers.common['Access-Control-Expose-Headers'] = 'Access-Token, Uid';

这个和

withCredentials: true,

响应正确,但标题不同

response.headers in console

在开发者工具中如下: developer tools response header

注意: 在 Postman 上,我得到了 set-cookie,但在应用程序上却没有得到响应。

我尝试了所有与 Axios 和 Vue js 相关的东西,但仍然没有在标题中获得 set-cookies。

【问题讨论】:

Access-Control- 标头是 response 标头;它们必须在服务器上设置。我建议阅读例如developer.mozilla.org/en-US/docs/Web/HTTP/CORS 我在服务器上浏览了这个链接,我们已经设置了响应标头,因此它来自邮递员但不在应用程序中。那是我的问题。 你能在代码 sandbox.io 上生成工作示例吗? 【参考方案1】:

实际上,您将requestresponse 混淆在一起。正如@jonrsharpe在评论部分所说,标题以前缀Access-Control-开头是Response Headers,这意味着它应该由服务器发送到浏览器作为响应。但是在这里,您是从客户端将其发送到服务器。

您应该在服务器端应用程序中启用它。不在客户端。

请参考, Set-Cookie not working in browser but works with Postman

【讨论】:

withCredentials: true,我为响应头写的这一行。如果不正确,请告诉我正确的方法。因为在邮递员中调用 api 时,我在响应标头中获取了 set-cookie 标头,但是在通过 axios 调用时,我没有在 response.headers 中获取 set-cookie 标头 您应该启用 CORS 请求,请注意 CORS 仅适用于浏览器,不适用于 API 客户端。所以它适用于邮递员但不适用于浏览器。 ***.com/questions/44849628/… 我在服务器端进行了更改,将标题添加为 Access-Control-Expose-Headers,它给了我每个标题。

以上是关于vue.js 和 axios 使用但无法在 response.headers 中接收 set-cookie的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js、Axios、JSon 和无刷新

使用 axios 和 vue.js 取消先前的请求

Vue Js - axios 的问题使用 laravel 执行多个并发请求

使用来自输入的值的 Axios 进行 API 调用,Vue.js 3

Axios 响应数据和 Vue JS , 使用数据

使用 vue js 和 axios 上传多个文件