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文件中<script></script>标签内引用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://www.bmabk.com/index.php/post/106482.html
