VUE----使用qs解决axios跨域问题

我使用的Vue版本是Vue脚手架2.0
在使用Vue脚手架请求网络接口的时候会存在跨域的问题，所以我们需要在服务端设置允许跨域

1.服务端设置允许跨域(nginx设置):

location / {
        root   html;
        index  index.html index.htm index.php;
        add_header 'Access-Control-Allow-Origin' *;
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
}

2.使用axios请求测试：

1.当我们发起get请求不携带参数时访问正常：

created(){
    this.axios({
      url:'https://www.liurulan.cn/data.php',
      method:'get'
    }).then(res=>{
      this.name = res.data.name
      this.age = res.data.age
    })
  }

2.当我们发起get请求携带参数时访问同样正常：

created(){
    this.axios({
      url:'https://www.liurulan.cn/data.php',
      method:'get'，
      params:{
        id:14
      },
    }).then(res=>{
      this.name = res.data.name
      this.age = res.data.age
    })
  }

3.当发起post请求时却报错异常，提示跨域：

created(){
    this.axios({
      url:'https://www.liurulan.cn/data.php',
      method:'post',
      data:{
        id:14
      },
    }).then(res=>{
      this.name = res.data.name
      this.age = res.data.age
    })
  }

报错截图

但是我们nginx已经设置允许跨域访问！！！

3.跨域原因：

axios使用post方法时传输数据给后台默认为json格式，而json是一种数据交换格式，但这就导致后台需要对json进行解析，从而导致ajax的跨域问题

4.解决post跨域问题：

qs的stringify方法，可以将前端中的对象转换为字符串格式发送给后端，不仅利于解析，也能解决跨域问题
1.下载qs：

npm install qs 

2.main.js中引入qs：

import qs from 'qs'
Vue.prototype.qs = qs

3.使用qs：

created(){
    this.axios({
      url:'https://www.liurulan.cn/data.php',
      method:'post',
      data:this.qs.stringify({
        sex:'man'
      })
    }).then(res=>{
      this.name = res.data.name
      this.age = res.data.age
    })
}

4.axios发送post请求跨域问题解决！