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进行网络通讯及如何解决跨域的问题问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。
当前名称：Vue.js2.0+ElementUI用axios进行网络通讯及如何解决跨域的问题
文章路径：http://6mz.cn/article/psiddi.html