我正在使用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);
});
},
後端的 API 要回傳一個 Header
Access-Control-Expose-Headers: Authorization
表示伺服器允許瀏覽器存取回應標頭的白名單
通常這種跨域請求 伺服器 大約都會設定幾個 Header 項目
這些都是由後端去設定的