VUE项目使用axios发送post跨域请求，返回数据失败问题

Access to XMLHttpRequest at 'http://xxxx' from origin 'http://localhost:8080'
has been blocked by CORS policy: Response to preflight request doesn't pass
access control check: No 'Access-Control-Allow-Origin' header is present on
the requested resource.

解决方法（一）

第一步，在后端接受方，对返回的数据添加响应头，使用下面这句代码：

// 添加响应头,解决node返回数据给ajax跨域的不兼容的问题
res.setHeader('Access-Control-Allow-Origin', '*')

第二步，默认情况下，axios将JavaScript对象序列化为JSON，要以application/x-www-form-urlencoded格式发送数据，可以在请求前端，使用qs库对数据进行编码。先npm中安装qs库，如果安装很慢，可以使用淘宝镜像cnpm install qs --save安装。

npm install qs --save

然后在使用axios的VUE文件中标签内引用qs库：

import qs from 'qs'

接下来就可以使用qs.stringify(data)转换json数据了!

//使用下面qs库对数据进行编码
this.$axios.post('http://localhost:3000', qs.stringify({
   username: 'user',
   password: '123456'
}))
.then((response) => { // 请求成功处理
   console.log(response)
   //转换数据为字符串
   alert(JSON.stringify(response.data))
   // 跳转路由到主页面
   this.$router.replace('/home')
})
.catch((error) => { // 请求失败处理
   console.log(error)
})

解决方法（二）

可以自己设置一个代理服务器，使用proxyTable 我比较推荐这种方法。
首先在config/index.js 里面找到proxyTable ：{} ，然后在里面加入

'/api': {
        target: 'http://localhost:8888',// 相当于自带http://localhost:8888/api
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''// 重定向删除/api
        }
      }

注意这里面 /api是你自定义的，写成什么都可以。

target 设置你调用的接口域名和端口号。

这里理解成用‘^/api’代替target里面的地址，后面组件中我们调接口时直接用api代替 。

比如我要调用’http://localhost:8888/getuser‘，直接写‘/api/getuser’即可。

this.$api.('/api/getuser')
      .then(res => {
        console.log(res)
      })