原创声明
本文系作者辛苦码字所得，欢迎分享和转载，但请在明显位置注明作者的如下信息：
笔名：来碗鸡蛋面
简书主页：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：
利用<script>元素的开放策略(网页跨域得到从其他来源动态产生的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请求代码：
网友评论