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

生產環境 log

二、設置 Access-Control-Expose-Headers

如果想要在生產環境獲取響應頭其他屬性，需要後端人員設置 Access-Control-Expose-Headers

這樣就成功獲取到其他參數啦

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

 設置之後生產環境獲取到的響應頭