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)       //请求失败返回的数据
              })