Vue.js2.0+ElementUI用axios进行网络通讯及如何解决跨域的问题

Vue.js2.0+Element UI用axios进行网络通讯及如何解决跨域的问题，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

10年的宝塔网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。全网营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整宝塔建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联从事“宝塔网站设计”,“宝塔网站推广”以来，每个客户项目都认真落实执行。

安装axios

在命令控制台中切换成当前工作目录,输入npm i axios -s -dev进行安装

配置axios

打开main.js文件,里面加入import axios from 'axios'

然后加入Vue.prototype.$http = axios

调用API

我们在项目的HelloWorld.vue里面加一个按钮,给他加上一个点击事件

   按钮

然后在methods里面加入get事件

然后保存启动项目,点击按钮

百度了一下,发现axios组件需要实现跨域才能访问,很多方案都是让服务端去改这块,终于搜好久后发现一个解决方法.

axios实现跨域访问

在config/index.js文件找到proxyTable在里面加入

注:

其中 '/api' 为匹配项，target 为被请求的地址

因为在 ajax 的 url 中加了前缀 '/api'，而原本的接口是没有这个前缀的

所以需要通过 pathRewrite 来重写地址，将前缀 '/api' 转为 '/'

如果本身的接口地址就有 '/api' 这种通用前缀，就可以把 pathRewrite 删掉

然后回到我们的HelloWorld.vue里

原来的URL写的是全路径,现在因为我们在config/index.js里已经配置了target的地址,所里这里直接改后面的路径即可

对比上图里实际地址是没有api/的,所在在index.js里面路由

               pathRewrite: {

                   '^/api': '/'

               }

就起到作用了

重新运行程序后点击按钮后出现返回结果

关于Vue.js2.0+Element UI用axios进行网络通讯及如何解决跨域的问题问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。