关于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.js的proxyTable中配置一些我们所需要的东西:

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

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

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

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