时间戳

首页 > 解决方案 > vue.js 和 axios 使用但无法在 response.headers 中接收 set-cookie

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

问题描述

我尝试从 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

在开发者工具中如下： 开发者工具响应头

注意：在邮递员上，我得到了 set-cookie，但在应用程序上没有得到响应。

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

标签： javascriptjqueryvue.jsaxios

解决方案

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

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

参考这个， Set-Cookie 不能在浏览器中工作，但可以与 Postman 一起使用

推荐阅读