详解如何解决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 相关文章推荐
表单提交前触发函数返回true表单才会提交
Mar 11 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
May 09 Javascript
JsRender for index循环索引用法详解
Oct 31 Javascript
js实现获取div坐标的方法
Nov 16 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 Javascript
Bootstrap Table使用心得总结
Nov 29 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
详解vue表单验证组件 v-verify-plugin
Apr 19 Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
Dec 09 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
Oct 23 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缓存技术介绍
2006/11/25 PHP
用php获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
PHP调用Linux的命令行执行文件压缩命令
2013/01/27 PHP
PHP常用函数之根据生日计算年龄功能示例
2019/10/21 PHP
jQuery 操作XML入门
2008/12/25 Javascript
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
javascript实现点击后变换按钮显示文字的方法
2015/05/13 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
javascript图片延迟加载实现方法及思路
2015/12/31 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
vue2.0 keep-alive最佳实践
2017/07/06 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
[01:51]2014DOTA2国际邀请赛 这个赛场没有失败者VGTi5再见
2014/07/23 DOTA
Python设计模式之门面模式简单示例
2018/01/09 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
Python交互环境下打印和输入函数的实例内容
2020/02/16 Python
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
BONIA波尼亚新加坡官网:皮革手袋,鞋类和配件
2016/08/25 全球购物
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
欧洲顶级体育电子商务网站:SportsShoes.com
2018/03/27 全球购物
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
数据库面试要点基本概念
2013/10/31 面试题
JAVA招聘远程笔试题
2015/07/23 面试题
党课培训心得体会
2014/09/02 职场文书
2015年派出所工作总结
2015/04/24 职场文书