详解如何解决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进行拖拽
Jul 20 Javascript
jMessageBox 基于jQuery的窗口插件
Dec 09 Javascript
将光标定位于输入框最右侧实现代码
Dec 04 Javascript
详细介绍8款超实用JavaScript框架
Oct 25 Javascript
js获取select标签选中值的两种方式
Jan 09 Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 Javascript
template.js前端模板引擎使用详解
Oct 10 Javascript
Node.js搭建小程序后台服务
Jan 03 Javascript
Vue组件库发布到npm详解
Feb 17 Javascript
angular 用Observable实现异步调用的方法
Dec 27 Javascript
浅析JavaScript异步代码优化
Mar 18 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
Sep 24 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简单实现多语言切换的方法
2016/05/09 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
PHP实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
JS date对象的减法处理实现代码
2010/12/28 Javascript
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
关于js中for in的缺陷浅析
2013/12/02 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
JS中SetTimeout和SetInterval使用初探
2017/03/23 Javascript
深入理解Vue 单向数据流的原理
2017/11/09 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
一些手写JavaScript常用的函数汇总
2019/04/16 Javascript
浅谈Vue的响应式原理
2019/05/30 Javascript
JS实现水平遍历和嵌套递归操作示例
2019/08/15 Javascript
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
python监控键盘输入实例代码
2018/02/09 Python
selenium+python自动化测试之使用webdriver操作浏览器的方法
2019/01/23 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
2017/12/28 HTML / CSS
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
竞聘副主任科员演讲稿
2014/01/11 职场文书
家长对老师的感言
2014/03/11 职场文书
员工教育培训协议书
2014/09/27 职场文书
安全隐患整改报告
2014/11/06 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
趣味运动会标语口号
2015/12/26 职场文书
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android