详解如何解决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 27 Javascript
基于jquery的滑动样例代码
Nov 20 Javascript
js实现仿百度瀑布流的方法
Feb 05 Javascript
JavaScript  cookie 跨域访问之广告推广
Apr 20 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 Javascript
vue 引入公共css文件的简单方法(推荐)
Jan 20 Javascript
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
微信小程序实现星星评价效果
Nov 02 Javascript
jquery操作select常见方法大全【7种情况】
May 28 jQuery
vue-cli4.0多环境配置变量与模式详解
Dec 30 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函数解决SQL injection
2006/10/09 PHP
用PHP将数据导入到Foxmail
2006/10/09 PHP
一个SQL管理员的web接口
2006/10/09 PHP
php文件操作实例代码
2012/05/10 PHP
PHP正确解析UTF-8字符串技巧应用
2012/11/07 PHP
PHP与javascript实现变量交互的示例代码
2013/07/23 PHP
ThinkPHP3.1新特性之字段合法性检测详解
2014/06/19 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
jQuery简单实现隐藏以及显示特效
2015/02/26 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
微信小程序使用modal组件弹出对话框功能示例
2017/11/29 Javascript
angular动态表单制作
2018/02/23 Javascript
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
2019/01/08 Javascript
原生JavaScript实现滑动拖动验证的示例代码
2019/12/06 Javascript
vue中的循环对象属性和属性值用法
2020/09/04 Javascript
Python中zip()函数用法实例教程
2014/07/31 Python
使用Python生成XML的方法实例
2017/03/21 Python
解决Scrapy安装错误:Microsoft Visual C++ 14.0 is required...
2017/10/01 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
HTML5中Canvas与SVG的画图原理比较
2013/01/16 HTML / CSS
杭州信雅达系统.NET工程师面试试题
2015/02/08 面试题
写给妈妈的道歉信
2014/01/11 职场文书
小学生开学感言
2014/02/28 职场文书
三万活动总结
2014/04/28 职场文书
生产车间管理制度
2015/08/04 职场文书
如何撰写促销方案?
2019/07/05 职场文书
2019年二手房买卖合同范本
2019/10/14 职场文书
pyqt5打包成exe可执行文件的方法
2021/05/14 Python
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript