axios調用接口時用post 送出資料，背景擷取不到送出的資料解決方法

調用接口常用的方式是axios,但在調的過程中會遇到很多問題， 後 台 獲 取 不 到 提 交 的 數 據 \color{red}{背景擷取不到送出的資料} 背景擷取不到送出的資料是其中之一。

問 題 \color{blue}{問題} 問題

post請求傳參時，資料已經送出，打開開發者工具，點選 network 裡面的确有資料已經傳過去了，但背景那裡列印時沒有擷取到傳過去的參數。是以解決方法如下：

解 決 方 案 \color{blue}{解決方案} 解決方案

• 原 因 \color{purple}{原因} 原因：

  傳參方式是request payload,參數格式是json，而并非用的是form傳參，是以在背景用接收form資料的方式接收參數就接收不到了。POST表單請求送出時，使用的

  Content-Type

  是

  application/x-www-form-urlencoded

  ，而使用原生AJAX的POST請求如果不指定請求頭RequestHeader，預設使用的

  Content-Type

  是

  text/plain;charset=UTF-8

  ，而此處的Content-Type是：

  application/json;charset=UTF-8

  

• 解 決 方 法 \color{purple}{解決方法} 解決方法
  • 安裝

    qs

    npm install qs --save  
               

  • 在頁面中引用 qs(根據需求在main.js或者本頁面引入)
  • 同時需要将請求頭headers改為： ‘Content-Type’: ‘application/x-www-form-urlencoded’
  • axios請求完整部分（包含解決方法）

    this.$axios({
          url: "/flow/gateway",
          method: "post",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          },
          
          //解決之前代碼
           // data: {
           //  username:"anna"
          // }
         
          //解決之後代碼
          data: qs.stringify({
           username:"anna"
          })
        }).then(res => {
          console.log(res);
        });
               

    補 充 \color{red}{補充 } 補充

    qs.stringify和JSON.stringify的差別:

    qs可通過npm install qs指令進行安裝，是一個npm倉庫所管理的包。而qs.stringify()将對象 序列化成URL的形式，以&進行拼接。JSON是正常類型的JSON，請對比一下輸出:

    var a = {name:'anna',age:18};
    console.log('qs',qs.stringify(a))    // name=anna&age=18
    console.log('json',JSON.stringify(a))   //{"name":"anna","age":18}
               

    以 上 問 題 是 我 在 項 目 中 遇 到 問 題 時 的 解 決 辦 法 ， 若 有 其 他 更 好 的 辦 法 歡 迎 分 享 在 下 面 \color{red}{以上問題是我在項目中遇到問題時的解決辦法，若有其他更好的辦法歡迎分享在下面} 以上問題是我在項目中遇到問題時的解決辦法，若有其他更好的辦法歡迎分享在下面❤️