在使用axios請求egg.js封裝的post介面時出現missing csrf token 或 invalid csrf token。踩過坑的新手估計不在少數，本篇記錄一下解決方法。

問題原因

• 引用一下官網的Web 安全概念：

Web 應用中存在很多安全風險，這些風險會被黑客利用，輕則篡改網頁內容，重則竊取網站內部資料，更為嚴重的則是在網頁中植入惡意程式碼，使得使用者受到侵害。

常見的安全漏洞如下：

• XSS 攻擊：對 Web 頁面注入指令碼，使用 JavaScript 竊取使用者資訊，誘導使用者操作。
• CSRF 攻擊：偽造使用者請求向網站發起惡意請求。
• 釣魚攻擊：利用網站的跳轉連結或者圖片製造釣魚陷阱。
• HTTP引數汙染：利用對引數格式驗證的不完善，對伺服器進行引數注入攻擊。
• 遠端程式碼執行：使用者通過瀏覽器提交執行命令，由於伺服器端沒有針對執行函式做過濾，導致在沒有指定絕對路徑的情況下就執行命令。

對於這些風險，Egg框架本身內建了豐富的解決方案。迴歸本題，其中出現missing csrf token就是因為CSRF 的防禦方案。

解決方案如下：

關閉配置（不推薦）

// config/config.default.js

exports.security = {
  csrf: {
    enable: false,
  },
};

注意： 框架的安全外掛是預設開啟的。除非清楚的確認後果，否則不建議擅自關閉安全外掛提供的功能。

配置請求headers

• 修改config中security的配置

// config/config.default.js

exports.security = {
  csrf: {
    enable: true,
    headerName: 'token',
  },
};

解釋： 通過 header 的 token 欄位傳遞 CSRF token，預設欄位為 x-csrf-token。

• axios請求配置：

// 例：

async function getData(data) {
  try {
    let res = await axios({
      url: "http://127.0.0.1:7001/api/test/list",
      method: 'POST',
      data,
      headers: {
        "token": 'xxxxxxxxx',
      }
    });
    console.log(res.data)
  } catch (e) {
    console.log(e)
  }
}
 

• 在Node環境請求post介面，沒有Cookie資訊，所以還需要在請求的headers中加上Cookie，不然會報錯invalid csrf token。程式碼如下：

headers: {
    "token": 'xxxxxxxxx',
    "Cookie": 'csrfToken=xxxxxxxxx',
}

參考文件：

• https://eggjs.org/zh-cn/core/security.html

歡迎訪問：個人部落格地址