脚本宝典收集整理的这篇文章主要介绍了

关于vue-resource在dev环境下跨域问题的解决方法

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

跨域问题

  • 相信跨域问题是每个前端在ajax请求中都会遇到的问题,因为浏览器的同源策略的限制,所以ajax是不支持跨域的,当然当后台在没有完成搭建的时候,这时候我们需要使用到模拟数据的时候,这时候很多的api就会出现跨域问题;在vue-resource中当然这个问题也不例外;如下

    图片描述

    所以在此我也就整理出了相应的解决方法.

解决方法

  • 直接在浏览器中安装插件解决跨域问题,(仅限google)

    我们一般调试也是在google中调试,强大的google当然也是有许多开发者工具;现在我就说一个google的解决跨域问题的方法,安装一个名字叫allow-control-allow-origin的插件,下面附上链接
    我是链接
    就是下图这个插件,因为是google的,当然下载要无障碍上网你们知道的,
    图片描述

    下载完成后会在浏览器的插件窗口看到一个绿色的小logo,
    图片描述

    只要将调试链接加入到这个里面,就可以在google浏览器里面调试了,不会有跨域的问题了

  • 修改的vue-cli的配置文件

    因为vue-cli是使用的webpack打包的,所以我们需要在config文件夹里面配置,找到config文件夹的index.jsproxyTable中配置一些我们所需要的东西:

         proxyTable: {
                  '/data':{
                    target: 'http://v.juhe.cn',
                    changeOrigin: true,
                    pathRewrite: {
                      '^/data': ''
                    }
                  }

因为我测试使用的是聚合的api,然后url只需要/data/someKey这种格式就可以了!
我的网站里还有更多关于vue更详细的小方法,欢迎来看看

搬砖小网站
我的github上面也有使用vue-cli搭建的项目,喜欢的可以star一下哦!!!
github地址

以上是我总结的vue在dev环境中一些解决方法,希望能帮到你们!

总结

以上是脚本宝典为你收集整理的

关于vue-resource在dev环境下跨域问题的解决方法

全部内容,希望文章能够帮你解决

关于vue-resource在dev环境下跨域问题的解决方法

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过