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

timger 发布于2019-08-20 17:49 / 1987人阅读

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

跨域问题

相信跨域问题是每个前端在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环境中一些解决方法,希望能帮到你们!

GPU服务器海外云主机解决问题的方法关于安卓开发环境问题云服务器问题及解决方法关于javascript的问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83893.html

关于Vue/axios下跨域cookie的处理

摘要：凡事有例外，以下分别对待不同情况服务器端配置即可客户端配置，这样大部分浏览器都支持跨域了，反正新版本下无问题。但放在默认设置下依然出现无法获取的问题，至此，查资料查到解决存取的跨域问题，依照文中记载，在追加的响应头，解决了下的问题。一般在生产环境下尽量可以通过nginx等反向代理，把vue前端和api接口处理成同一端口和域名。在开发和测试时，也可以使用兼容性比较好的浏览器进行。凡...

Mike617 2019-07-25 13:54 评论0 收藏0
axios异步请求数据的简单使用

摘要：使用模拟好后端数据之后模拟数据的使用参考，就需要尝试请求加载数据了。数据请求选择了，现在都推荐使用。规定要发送到服务器的数据。布尔值，表示请求是否异步处理。要求为类型的参数，请求成功后调用的回调函数。在一个中重写回调函数的字符串。使用Mock模拟好后端数据之后（Mock模拟数据的使用参考：https://segmentfault.com/a/11...），就需要尝试请求加载数据了。数...

forsigner 2019-08-23 14:40 评论0 收藏0
使用vue-axios和vue-resource解决vue中调用网易云接口跨域的问题

摘要：使用和解决中调用网易云接口跨域的问题新建项目新建项目新建项目然后具体设置如下项目名称项目描述作者回车即可注意这里要安装和然后和都选择即可安装项目依赖安装模块安装模块运行项目效果图如下修改页面内容我们先修改一下页面内容调用网易使用vue-axios和vue-resource解决vue中调用网易云接口跨域的问题 1. 新建vue项目 1.1 新建项目新建项目 vue init webp...

_ivan 2019-06-28 13:40 评论0 收藏0
《从零构建前后分离的web项目》实战 - 欲善其事必先利其器继续打磨前端架构

摘要：工欲善其事必先利其器继续打磨前端架构抱歉生病拖更了，快乐本文永久更新地址填坑上回还真的有同学提到了这个问题，感谢细心的你。既实现了拦截又实现了状态的共享。愉快的拿到了数据这样，前后分离的项目可以这样借助测试接口，不需要骚扰任何人。工欲善其事必先利其器 - 继续打磨前端架构抱歉生病拖更了，1024快乐本文永久更新地址填坑上回还真的有同学提到了这个问题，感谢细心的你。@_noob...

Mike617 2019-08-23 12:30 评论0 收藏0