axios 获取响应头 开发环境和生产环境不一致问题

一、axios 响应拦截器获取响应头

axios.interceptors.response.use(
  (res) => {
    const { config, data, headers, status } = res;

    console.log(
      `-----------------------${config.url}请求开始------------------------`
    );
    console.log(`接口地址:`, config.url);
    console.log(`接口请求方式:`, config.method);
    console.log(
      `接口请求参数:`,
      config.method === "get" ? config.params : config.data
    );
    console.log(`接口请求头:`, config.headers);
    console.log(`接口响应头:`, headers);
    console.log(`接口响应状态:`, status);
    console.log(`接口响应数据:`, data);
    console.log(
      `-----------------------${config.url}请求结束------------------------`
    );
    
    return res;
  },
  (err) => {
    return Promise.reject(err);
  }
);

开发环境 log

axios 获取响应头 开发环境和生产环境不一致问题_第1张图片

生产环境 log

axios 获取响应头 开发环境和生产环境不一致问题_第2张图片

二、设置 Access-Control-Expose-Headers

如果想要在生产环境获取响应头其他属性,需要后端人员设置 Access-Control-Expose-Headers

这样就成功获取到其他参数啦

Access-Control-Expose-Headers : "X-Pagination-Total-Count"

 设置之后生产环境获取到的响应头

axios 获取响应头 开发环境和生产环境不一致问题_第3张图片

 

你可能感兴趣的:(Vue)