在用 vue 做前端开发的时候, 因为一般跑 vue 使用的 webpack 自带的 node 服务, 而我们实际要使用的数据确是后台服务器上的, 所以这就涉及到服务器请求跨域的问题. 本来在诸如 axios 之类的网络请求参数里面配置
withCredentials: true,
就可以解决跨域问题的, 但是现在浏览器比如 chorme 有做了新的跨域限制, 比如要服务器端配置允许跨域才行, 详见跨域问题解决, 是英文的, 看起来需要花点功夫; 那有没有不需要服务器端配置就能解决浏览器的跨域问题的办法呢? 答案肯定是有的!!
这里就说 chorme 吧, 因为 chorme 基本都是前端主流浏览器了, 配置方法如下:
版本号 49 之前的跨域设置
具体做法为:
1. 下载并安装好 chorme 浏览器后在桌面找到浏览器快捷图标并点击鼠标右键的属性一栏.
2. 在属性页面中的目标输入框里加上 --disable-Web-security 如下图所示:
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 又能正常跨域工作了.
跨域成功后, 首页换成了 google 的 welcome 页面, 同时原来收藏的链接和历史记录都不见了, 而 C:\MyChromeDevUserData 目录下则生成了新的个人信息相关的文件.
这样就解决了诸如
报错的问题, 一个坑给填满了, 后面还有很多坑需要去填, 哈哈!!!
来源: https://www.jb51.net/article/150638.htm