config.headers.authorization詳解

一、什麼是config.headers.authorization

在進行http請求時，有時需要進行身份驗證，這時候就需要向伺服器提供相應的身份信息。身份信息是以Authorization請求頭的形式發送的。config.headers.authorization就是在http請求中，用於指定Authorization請求頭信息的屬性。

二、Authorization請求頭的格式

Authorization請求頭包含三部分：認證方法、空格、認證參數。

其中，認證方法指定了客戶端使用的認證策略，如基本認證、摘要認證、Bearer Token認證等。

而認證參數則是以不同的方式進行編碼和傳輸的，比如base64編碼、form data等。

以下是基本認證的Authorization請求頭格式示例：

Authorization: Basic dXNlcjpwYXNzd29yZA==

三、如何在axios中使用config.headers.authorization

在使用axios發送http請求時，可以通過修改config對象中的headers屬性值來設置請求頭信息，從而實現身份驗證。

以下是基於access token的Bearer Token認證方式的示例代碼：

import axios from 'axios';

//設置Authorization請求頭信息
const accessToken = 'xxxxxxxxxxx';
axios.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`;

//發送GET請求
axios.get('/api/userinfo')
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.log(error);
  });

四、使用Authorization請求頭進行跨域請求

由於瀏覽器的同源策略，當我們在前端調用其他域名下的API時，會遇到跨域問題。但是可以通過在伺服器端設置Access-Control-Allow-Headers響應頭來允許前端使用Authorization請求頭實現跨域請求。

以下是服務端設置Access-Control-Allow-Headers的示例代碼：

const express = require('express');
const app = express();

//允許前端使用Authorization請求頭
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Authorization, Content-Type');
  next();
});

//處理GET請求
app.get('/api/userinfo', (req, res) => {
  res.json({name: '張三', age: 20});
});

app.listen(3000, () => {
  console.log('伺服器啟動成功');
});

五、安全性考慮

在使用Authorization請求頭時，需要考慮信息安全問題。例如，不要將明文的用戶名和密碼直接放在Authorization請求頭中傳輸。

以下是使用base64編碼的方式進行身份驗證的示例代碼：

import axios from 'axios';

//將用戶名和密碼做base64編碼，然後設置Authorization請求頭信息
const username = 'user';
const password = 'password';
const base64Credentials = btoa(username + ':' + password);
axios.defaults.headers.common['Authorization'] = `Basic ${base64Credentials}`;

//發送GET請求
axios.get('/api/userinfo')
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.log(error);
  });