0. 系列文章

項目源碼請猛戳這里!!!

1. 前言

在實際項目開發中，前端代碼和后端代碼往往是跑在兩個不同的端口上，前端的請求要訪問后端的api，就成了跨端口請求，也就是跨域請求。而瀏覽器為了安全起見，會根據同源策略禁止這種跨域請求。在同域的情況下，我們發送請求會默認攜帶當前域下的 cookie，但是在跨域的情況下，由於瀏覽器的限制，默認是不會攜帶請求域下的 cookie ，而我們通常請求中是需要攜帶cookie的，這就需要在XMLHttpRequest對象上配置withCredentials屬性，將其設置為true即可，官方的axios在請求配置對象中為我們提供了設置這一屬性的選項，接下來，我們也要在我們的axios中提供這一選項。

添加這一選項非常簡單，我們只需在請求配置對象config中加上該屬性，然后在發送請求時判斷是否配置了該屬性，如果配置了我們就在XMLHttpRequest對象上將該屬性進行配置即可。

OK，接下來，我們就來實現它。

2. 修改 AxiosRequestConfig

給請求配置對象config中添加withCredentials屬性之前，我們需要先在src/types/index.ts中的配置對象的接口類型定義AxiosRequestConfig上添加該屬性的定義，如下：

export interface AxiosRequestConfig {
  // 新增
  withCredentials?: boolean;
}

3. 添加請求判斷邏輯

接口定義好之后，我們只需在發送請求之前，判斷用戶是否配置了該屬性，如果配置了，就把配置的屬性值添加到XMLHttpRequest對象上即可，我們修改src/core.xhr.ts中的xhr函數，如下：

const { /*...*/ withCredentials } = config

if (withCredentials) {
  request.withCredentials = true
}

OK，這樣withCredentials屬性配置選項就添加好了，接下來，我們就編寫demo來看看效果。

4. demo編寫

在 examples 目錄下創建 addWithCredentials目錄，在 addWithCredentials目錄下創建 index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>addWithCredentials demo</title>
  </head>
  <body>
    <script src="/__build__/addWithCredentials.js"></script>
  </body>
</html>

接着再創建 app.ts 作為入口文件：

import axios from "../../src/axios";

axios.post("http://192.168.1.2:3000/api/addWithCredentials", {}).then(res => {
    console.log(res);
  });

axios.post("http://192.168.1.2:3000/api/addWithCredentials", {}, {
      withCredentials: true
    }).then(res => {
    console.log(res);
  });

在本demo中，我們發送兩個請求，一個請求配置了withCredentials屬性，一個沒有。理想情況下，沒有配置withCredentials屬性的請求就攜帶不了cookie，自然也就接收不到服務端返回的cookie內容；而配置了withCredentials屬性的請求可以攜帶cookie，那么它就可以收到服務端返回的cookie內容。后面我們可以通過結果來驗證現在的猜測。

接着在 server/server.js 添加新的接口路由：

// 添加withCredentials
const cookieParser = require("cookie-parser");

app.use(cookieParser());

const cors = {
  "Access-Control-Allow-Origin": "http://192.168.1.2:8000",
  "Access-Control-Allow-Credentials": true,
  "Access-Control-Allow-Methods": "POST, GET, PUT, DELETE, OPTIONS",
  "Access-Control-Allow-Headers": "Content-Type"
};

router.post("/api/addWithCredentials", function(req, res) {
  res.set(cors);
  res.json(req.cookies);
});
router.options("/api/addWithCredentials", function(req, res) {
  res.set(cors);
  res.end();
});

此處切記一定要配置兩個路由接口，除了post還有加一個options，這是因為cors跨域對於非簡單請求瀏覽器會先發送一個options類型的請求來預檢請求，具體原因請看這里!

這里需要安裝一下 cookie-parser 插件，用於請求發送的 cookie。

另外，為了形式跨域請求，我們還需要把webpack.config.js文件中配置的webpack跨域代理配置注釋掉，如下：

devServer: {
    noInfo: true,
    overlay: true,
    open: true
    // proxy: { // 配置跨域
    //   '/api/': {
    //     target: 'http://192.168.1.2:3000',
    //     ws: true,
    //     changOrigin: true
    //   },
    // }
  }

最后在根目錄下的index.html中加上啟動該demo的入口：

<li><a href="examples/addWithCredentials">addWithCredentials</a></li>

OK,我們在命令行中執行：

# 同時開啟客戶端和服務端
npm run server | npm start

接着我們打開 chrome 瀏覽器，訪問 http://localhost:8000/ 即可訪問我們的 demo 了，我們點擊 addWithCredentials，通過F12的 network 部分我們可以看到：兩條請求已經正常發出了，但是兩個請求返回的data都為空，這是因為我們還沒有寫cookie內容呢，按照下圖中的方式寫入cookie后，在刷新頁面發送請求，我們就可以看到沒有配置withCredentials屬性的請求返回的data仍舊為空{}，而配置了withCredentials屬性的請求返回的data已經有攜帶的cookie內容了。

OK，添加withCredentials屬性的功能我們就已經實現了。

（完）

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 使用Typescript重構axios(二十六)——添加HTTP授權auth屬性使用Typescript重構axios(二十九)——添加baseURL 使用Typescript重構axios(二十一)——請求取消功能：添加axios.isCancel接口使用Typescript重構axios(十三)——讓響應數據支持泛型使用Typescript重構axios(二十四)——防御XSRF攻擊 vue使用mqtt（二十三）使用Typescript重構axios(三十一)——添加axios.all和axios.spread方法使用Typescript重構axios(二十八)——自定義序列化請求參數使用Typescript重構axios(二十五)——文件上傳下載進度監控使用Typescript重構axios(十五)——默認配置