允许谷歌的位置服务器,开发中禁用谷歌浏览器同源安全设置，绕开跨域限制，方便调试...

原创声明

本文系作者辛苦码字所得，欢迎分享和转载，但请在明显位置注明作者的如下信息：

笔名：来碗鸡蛋面

简书主页：https://www.jianshu.com/u/4876275b5a73

邮箱：job_tom@foxmail.com

CSDN ID：tom_wong666

背景：

1，H5开发移动App，vue框架，谷歌浏览器模拟器测试；

2，生产环境数据请求流程为H5=>原生=>后端服务器，数据返回流程反之；

3，测试环境开发过程中，需要H5和后端测试服务器频繁交互，并随时查看请求和返回数据。

问题：

H5直接连接开发服务器有跨域问题。

跨域解决方案(今天主要说简单粗暴的第5种):

一般情况下还是应该让后端配合用CORS方案

1，JSONP：

利用元素的开放策略(网页跨域得到从其他来源动态产生的JSON数据)来处理跨域限制，不过只能支持get方法；

2，CORS：

生产环境中解决跨域的根本方法，要求浏览器和服务器同时支持，浏览器需要IE10以上的新版浏览器。

服务器需要增加如下代码(以今晚验证成功的PHP为例)：

//解除跨域的设置

//允许哪些请求，可以写http://127.0.0.1:8080等具体ip和端口，

//写*表示允许全部

header('Access-Control-Allow-Origin:*');

//允许哪些方法

header('Access-Control-Allow-Methods:POST,GET');

3，WebSocket：

H5的一个持久化协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案；

4，postMessage：

此方法window.postMessage方法允许跨窗口通信，不论这两个窗口是否同源；

5，直接解除浏览器同源安全策略：

这种方式在生产环境是不可能实现的，但是在本文提及的开发环境中却很好用。H5开发者只要解除自己浏览器的同源安全策略，就可以毫无障碍的访问测试服务器做测试联调，而不需要后台服务器做CORS设置。个人学习可以随便玩，如果在工作中使用，需要谨慎。下面上方法：

桌面新建一个谷歌浏览器快捷方式=>左键选中这个新建的快捷方式=>右键=>属性=>目标=>在目标后路径.....\chrome.exe"后面，空一格添加如下后缀--disable-web-security --user-data-dir=>点击确定=>最后重启浏览器，操作完成。图示如下

重启浏览器后出现如下标识说明初步设置成功，可以去尝试请求了：

如果请求不到数据并报如下错误，说明配置失败，请重新配置，否则请检查HTTP请求代码：