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 passaccess control check: No 'Access-Control-Allow-O
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)
})
更多推荐
所有评论(0)