axios發送post請求時出現跨域報錯

報錯問題

今天在寫項目的時候，拿到後端給的的接口，發送請求時卻發現報錯，可是後端代碼中是設置了跨域的：

header("Access-Control-Allow-Origin:*");

看一下報錯問題：

Access to XMLHttpRequest at '' from origin '' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

經過報錯咱們能夠看到是請求頭不被容許，查閱以後瞭解到大部分服務器可以識別的請求頭爲application/x-www-form-urlencoded，而咱們axios的post請求的請求頭是application/json，因此咱們須要對它進行轉換。

在頁面中引入第三方庫qs

安裝
npm install qs

在當前頁面中引入
import Qs from 'qs'

在axios請求中使用

源代碼:

this.$axios
    .post("http://47.94.168.249/php/yingyong.php",
          {
            appName: that.name,
            appType: that.type1
          }
        )
        .then(function(response) {
          console.log(response);
        });

加入Qs庫以後：

this.$axios
    .post("http://47.94.168.249/php/yingyong.php",
          Qs.stringify({
            appName: that.name,
            appType: that.type1
          })
        )
        .then(function(response) {
          console.log(response);
        });

而後咱們再進行請求就能夠拿到數據啦。