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)      })

来源地址：https://blog.csdn.net/weixin_42966151/article/details/127892348