详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)


Posted in Javascript onNovember 12, 2018

在用vue做前端开发的时候,因为一般跑vue使用的webpack自带的node服务,而我们实际要使用的数据确是后台服务器上的,所以这就涉及到服务器请求跨域的问题。本来在诸如axios之类的网络请求参数里面配置

withCredentials: true,

就可以解决跨域问题的,但是现在浏览器比如chorme有做了新的跨域限制,比如要服务器端配置允许跨域才行,详见跨域问题解决,是英文的,看起来需要花点功夫;那有没有不需要服务器端配置就能解决浏览器的跨域问题的办法呢?答案肯定是有的!!

这里就说chorme吧,因为chorme基本都是前端主流浏览器了,配置方法如下:

版本号49之前的跨域设置

具体做法为:

1.下载并安装好chorme浏览器后在桌面找到浏览器快捷图标并点击鼠标右键的属性一栏。

2.在属性页面中的目标输入框里加上   --disable-web-security  如下图所示:

详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)

3.点击应用和确定后关闭属性页面,并打开chrome浏览器。如果浏览器出现提示“你使用的是不受支持的命令标记 --disable-web-security”,那么说明配置成功。

版本号49之后的chrome跨域设置

chrome的版本升到49之后,跨域设置比以前严格了,在打开命令上加--disable-web-security之后还需要给出新的用户个人信息的目录。众所周知chrome是需要用gmail地址登录的浏览器,登录后就会生成一个存储个人信息的目录,保存用户的收藏、历史记录等个人信息。49版本之后,如果设置chrome浏览器为支持跨域模式,需要指定出一个个人信息目录,而不能使用默认的目录,估计是chrome浏览器怕用户勿使用跨域模式泄露自己的个人信息(主要是cookie,很多网站的登录token信息都是保存在cookie里)。

具体做法为:

1.在电脑上新建一个目录,例如:C:\MyChromeDevUserData

2.在属性页面中的目标输入框里加上   --disable-web-security --user-data-dir=C:\MyChromeDevUserData,--user-data-dir的值就是刚才新建的目录。

3.点击应用和确定后关闭属性页面,并打开chrome浏览器。

再次打开chrome,发现有“--disable-web-security”相关的提示,说明chrome又能正常跨域工作了。

详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)

跨域成功后,首页换成了google的welcome页面,同时原来收藏的链接和历史记录都不见了,而C:\MyChromeDevUserData目录下则生成了新的个人信息相关的文件。

详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)

这样就解决了诸如

详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)

报错的问题,一个坑给填满了,后面还有很多坑需要去填,哈哈!!!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery UI 1.72 之datepicker
Dec 29 Javascript
javascript利用初始化数据装配模版的实现代码
Nov 17 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
Feb 16 Javascript
jquery实现简单易懂的图片展示小例子
Nov 21 Javascript
JavaScript面向对象的实现方法小结
Apr 14 Javascript
JQuery实现简单的图片滑动切换特效
Nov 22 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
May 17 Javascript
AngularJS service之select下拉菜单效果
Jul 28 Javascript
微信小程序自定义导航教程(兼容各种手机)
Dec 12 Javascript
JS图片预加载三种实现方法解析
May 08 Javascript
Node.js API详解之 assert模块用法实例分析
May 26 Javascript
Node.js API详解之 V8模块用法实例分析
Jun 05 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 #jQuery
微信小程序左滑删除功能开发案例详解
Nov 12 #Javascript
微信运维交互机器人的示例代码
Nov 12 #Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 #jQuery
手动下载Chrome并解决puppeteer无法使用问题
Nov 12 #Javascript
vue elementui form表单验证的实现
Nov 11 #Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 #Javascript
You might like
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
Smarty模板变量调节器用法分析
2016/05/23 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
PHP预定义接口――Iterator用法示例
2020/06/05 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
jQuery 对象中的类数组操作
2009/04/27 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
浅谈javascript中基本包装类型
2015/06/03 Javascript
跟我学习javascript的arguments对象
2015/11/16 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
JavaScript实现定时页面跳转功能示例
2017/02/14 Javascript
探索webpack模块及webpack3新特性
2017/09/18 Javascript
ES7之Async/await的使用详解
2019/03/28 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
jQuery实现穿梭框效果
2021/01/19 jQuery
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
[01:52]DOTA2完美大师赛Vega战队趣味视频——kpii老师小课堂
2017/11/25 DOTA
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
python中numpy.zeros(np.zeros)的使用方法
2017/11/07 Python
Django 实现下载文件功能的示例
2018/03/06 Python
使用Python读取安卓手机的屏幕分辨率方法
2018/03/31 Python
keras打印loss对权重的导数方式
2020/06/10 Python
html5录音功能实战示例
2019/03/25 HTML / CSS
移动通信行业实习自我鉴定
2013/09/28 职场文书
怎样有效的进行自我评价
2013/10/06 职场文书
人力资源管理毕业生自荐信
2014/06/26 职场文书
六查六看剖析材料
2014/10/06 职场文书
贪污检举信范文
2015/03/02 职场文书
会议主持词结束语
2015/07/03 职场文书