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

这篇具有很好参考价值的文章主要介绍了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文件中<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’即可。文章来源地址https://www.toymoban.com/news/detail-515858.html

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

到了这里，关于VUE项目使用axios发送post跨域请求，返回数据失败问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

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

解决方法（一）

解决方法（二）

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2