1. 程式人生 > 實用技巧 >vue中使用axios 遇到post 跨與問題解決-qs的使用

vue中使用axios 遇到post 跨與問題解決-qs的使用

在vue專案中常常會使用axios進行後端互動,如果使用get一般沒問題,但是使用post傳送請求時會出現跨與報錯。

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

這時候我們需要引入第三方模組幫我們解決這個問題:

1:安裝qs : npm install qs

2:引入:import qs from qs

3:使用:

axios.post('http://192.168.33.10:8009/api/token',
qs.stringify({
email: email,
password: pass,
}))
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);

});

程式碼:

 this.$http({
              method:'post',
              url:url,
              scriptCharset:"utf8",
              data:qs.stringify({    //這裡是傳送給後臺的資料
                username:this.ajaxName,
                uid:record.uid,
                tz_name:tuzi.filename,
                tz_url:tuzi.file_url,
                tz_parent:tuzi.parent,
                tz_status:tuzi.status,
              })
              
// data:{ //這裡是傳送給後臺的資料 不用qs的話會出現跨與報錯 // username:this.ajaxName, // uid:record.uid, // tz_name:tuzi.filename, // tz_url:tuzi.file_url, // tz_parent:tuzi.parent, // tz_status:tuzi.status, // } }).then((res) =>{//這裡使用了ES6的語法 // if(res.data!==1) return console.log(res) // window.open(url)//下載 }).catch((error) =>{ console.log(error) //請求失敗返回的資料 })