iT邦幫忙

0

如何使用vue+ axios 取得api 回傳 header 裡的 Authorization?

  • 分享至 

  • twitterImage

我正在使用vue+axio實作一個登入頁面,在回傳的response只看的到後端定義的response body,但是我想要取得 header 裡的 Authorization ,下圖是我的程式碼請問是缺少甚麼設定嗎?

server.js

axios.defaults.baseURL = '....';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.headers.common['Access-Control-Allow-Header'] = 'Authorization';

登入部分的程式碼

login() {
      const params = new URLSearchParams();
      params.append("username", this.username);
      params.append("password", this.password);
     
      axios
        .post("/user/authenticate", params)
        .then((response) => {
          console.log(response);
          this.isLogin = false;
          this.$router.push(this.componentName);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
淺水員 iT邦大師 6 級 ‧ 2021-03-19 09:42:01 檢舉
console.log(response.headers);
參考:https://github.com/axios/axios#response-schema
rubie iT邦新手 5 級 ‧ 2021-03-19 10:26:23 檢舉
您好,我是使用cdn引入的方式去使用vue,我在console.log(response.headers);沒有看到Authorization
我查看了許多教學都是如何往後端傳headers那是已經取得Authorization 的情況下,但是我需要在登入時取得他,我目前遇到的問題與這篇文章類似,我不太明白他的解決方法在我的例子要如何去使用,希望可以給我點方向,萬分感謝
https://stackoverflow.com/questions/37897523/axios-get-access-to-response-header-fields
淺水員 iT邦大師 6 級 ‧ 2021-03-19 10:38:56 檢舉
先用 F12 或 postman 看看後端回應的資料正不正確
再來考慮前端的問題吧
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
koro_michael
iT邦新手 2 級 ‧ 2021-03-19 12:35:40

後端的 API 要回傳一個 Header

Access-Control-Expose-Headers: Authorization

表示伺服器允許瀏覽器存取回應標頭的白名單

通常這種跨域請求 伺服器 大約都會設定幾個 Header 項目

  1. Access-Control-Expose-Headers <- 允許用戶設備可以讀取哪一些 Header
  2. Access-Control-Allow-Origin <- 允許哪些網域可以發送請求
  3. Access-Control-Allow-Headers <- 允許請求帶上哪一些 Header
  4. Access-Control-Allow-Methods <- 允許發送哪一些請求(Get Post Put...等)

這些都是由後端去設定的

我要發表回答

立即登入回答