详解如何解决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 相关文章推荐
JavaScript 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
使用javascipt---实现二分查找法
Apr 10 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
Apr 24 Javascript
javascript使用prototype完成单继承
Dec 24 Javascript
jquery实现textarea 高度自适应
Mar 11 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
Aug 21 Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 Javascript
使用Promise解决多层异步调用的简单学习心得
May 17 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
在vue项目中引入高德地图及其UI组件的方法
Sep 04 Javascript
Vue实现按钮级权限方案
Nov 21 Javascript
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
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中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
可定制的PHP缩略图生成程式(需要GD库支持)
2007/03/06 PHP
PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
PHP引用的调用方法分析
2016/04/25 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
laravel利用中间件防止未登录用户直接访问后台的方法
2019/09/30 PHP
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
谷歌浏览器调试JavaScript小技巧
2014/12/29 Javascript
JavaScript原生对象之Number对象的属性和方法详解
2015/03/13 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
2016/07/22 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
详解Bootstrap各式各样的按钮(推荐)
2016/12/13 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
2017/01/22 Javascript
SpringMVC+bootstrap table实例详解
2017/06/02 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
ES6新增的数组知识实例小结
2020/05/23 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
[02:36]DOTA2上海特锦赛 回忆电竞生涯的重要瞬间
2016/03/25 DOTA
python中__call__方法示例分析
2014/10/11 Python
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
python实现弹跳小球
2019/05/13 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
Python正则表达式如何匹配中文
2020/05/27 Python
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
如何做好总经理助理
2013/11/12 职场文书
教育科研先进个人材料
2014/01/26 职场文书
新闻编辑自荐书范文
2014/02/12 职场文书
校本教研活动总结
2014/07/01 职场文书
经典毕业生求职信
2014/07/12 职场文书
排球赛新闻稿
2015/07/17 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js
Python一行代码实现自动发邮件功能
2021/05/30 Python
mysql timestamp比较查询遇到的坑及解决
2021/11/27 MySQL