gorilla websocket无法跨域_三种常见的 跨域 解决方式--前端工作必考

前置知识

跨域：浏览器发送的请求地址（URL）与所在页面的地址 不同（端口/协议/域名 其一不同）。简言之，浏览器发出的请求url，与其所在页面的url，不一样。此时，同源机制会让浏览器拒收 服务器响应回来的数据。

同源机制：浏览器出于安全方面的考虑，只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。（这是 浏览器发送请求的安全机制，和服务器无关，即使服务器返回了请求，此机制也会让浏览器拒收）
（同源策略 场景举例：1发请求--浏览器在一个网站上，需要发送请求到该网站域名上的数据，是可以的，但若请求不是朝该网站域名下的资源，就不可以。也可以修改自己浏览器的跨域设置，但用户不会修改的。2 iframe：一个网站发iframe打开了另一个非同源的网站，但不能操作iframe里的网站的任何资源，如js，否则会危害这个iframe打开的网站）
本域（同源）指的是（下面三者都具备）？
同协议：如都是http或者https
同域名：如都是http://jirengu.com/a 和http://jirengu.com/b
同端口：如都是80端口

本文参考了下面三个博客，尤其第一个非常好，推荐用印象笔记剪藏后查阅，三种方式的具体实现，推荐可参考第一篇：
https://segmentfault.com/a/1190000011145364 （推荐）

https://github.com/hungeraibin/blog/issues/39
https://github.com/hungeraibin/blog/issues/38

三种解决方式

JSONP

JSONP(JSON with padding(添加))是通过 script 标签加载数据的方式，去获取数据，并把数据 当做 JS 代码来执行：提前在页面上声明一个函数，函数名通过接口传参的方式传给后台，后台解析到函数名后在原始数据上「包裹」这个函数名，发送给前端。换句话说，JSONP 需要对应接口的后端的配合才能实现。
jsonp缺点：只能实现get一种请求。JSONP太骇客，不如下面的CORS正统。

//把响应的json数据放入到回调函数的变量中
<script src="http://api.jirengu.com/weather.php?callback=showData"></script>

这个请求到达后端后，后端会去解析callback这个参数，获取到字符串showData，在发送数据做如下处理（换言之，前端和后端约定好，让后端支持这么处理）：
之前后端返回数据： {"city": "hangzhou", "weather": "晴天"} ，现在后端返回数据： showData({"city": "hangzhou", "weather": "晴天"}) （相当于一个函数）。 前端script标签在加载数据后，会把 「showData({“city”: “hangzhou”, “weather”: “晴天”})」做为 js 来执行，这实际上就是调用showData这个函数，同时参数是 {“city”: “hangzhou”, “weather”: “晴天”}。 用户只需要在加载 提前在页面定义好showData这个全局函数，在函数内部处理参数即可。

CORS

CORS 全称是 跨域资源共享（Cross-Origin Resource Sharing），是一种 ajax 跨域请求资源的方式，支持现代浏览器，IE支持10以上。 实现方式很简单，
1 当你使用 XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin；（浏览器无需做设置 只需发送ajax）
2 后台服务器收到请求后，会进行一系列处理，如果确定接受请求，则在返回结果中加入一个响应头：Access-Control-Allow-Origin （换言之，服务器允许的域url，会加入此响应头，相当于一个凭证）;
3 浏览器判断该相应头中是否包含 Origin 的值，如果有，则浏览器会处理响应，我们就可以拿到响应数据，如果不包含，浏览器直接驳回，这时我们无法拿到响应数据。
所以 CORS 的表象是让你觉得它与同源的 ajax 请求没啥区别，代码完全一样。

postMessage（着重，代码演示）

注意：用iframe举例 比较容易理解，方便读者看懂postmessage，实际一般不要用iframe了。更多是前2者。

通过让iframe的js元素，执行postmessage()，以发送消息给iframe访问的url网站，如果网站服务器收到消息（即 监听到了 以该消息为名 的事件）并进行处理，则浏览器可以实现一定程度的跨域。
浏览器发送数据 window.frames[0].postMessage(this.value,'*');
服务器监听跨域请求&浏览器监听返回的数据 window.addEventListener('message',function(e) {})

//参考文章【1】
postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：
a.） 页面和其打开的新窗口的数据传递
b.） 多窗口之间消息传递
c.） 页面与嵌套的iframe消息传递
d.） 上面三个场景的跨域数据传递

用法：postMessage(data,origin)方法接受两个参数
data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。
origin： 协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

1.）a.html：(http://www.domain1.com/a.html)

<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe><script>
var iframe = document.getElementById('iframe');
iframe.onload = function() {
var data = {
name: 'aym'
};
// 向domain2传送跨域数据
iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.domain2.com');
};

// 接受domain2返回数据
window.addEventListener('message', function(e) {
alert('data from domain2 ---> ' + e.data);
}, false);
</script>

2.）b.html：(http://www.domain2.com/b.html)

<script>
// 接收domain1的数据
window.addEventListener('message', function(e) {
alert('data from domain1 ---> ' + e.data);

var data = JSON.parse(e.data);
if (data) {
data.number = 16;

// 处理后再发回domain1
window.parent.postMessage(JSON.stringify(data), 'http://www.domain1.com');
}
}, false);
</script>