参考：https://segmentfault.com/a/1190000011145364
- 简单的跨域请求jsonp即可，复杂的cors，窗口之间JS跨域postMessage，开发环境下接口跨域用nginx反向代理或node中间件比较方便
同源策略
- 同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源
- 如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击
- 同源策略限制：
- Cookie、LocalStorage 和 IndexDB 无法读取
- DOM 和 Js对象无法获得
- AJAX 请求不能发送
- 跨域限制访问，其实是浏览器的限制，其实请求有发出去，对方服务器也有响应，只不过是被浏览器的同源策略拦下来
跨域解决方法
1. jsonp跨域
- 利用script可以跨域的特性，缺点是只能实现get请求
- 应用场景：为了减轻web服务器的负载，我们把js，css，图片等静态资源分离到另一台独立域名的服务器上，在html页面中跨域请求资源。
<script>
var script=document.createElement("script");
script.type="text/javascript";
//传参并指定回调函数为onblack
script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
document.head.append(script);
//回调函数
function onBack(res) {
alert(JSON.stringify(res));
}
</script>
onBack({"status": true, "user": "admin"})
$.ajax({
url: 'http://www.domain2.com:8080/login',
type: 'get',
dataType: 'jsonp', // 请求方式为jsonp
jsonpCallback: "onBack", // 自定义回调函数名
data: {}
});
- jsonpCallback：这个参数用来指定上面那个参数对应的回调函数名，如果不指定，jQuery会自动生成一个随机的函数名
2. 跨域资源共享（CORS）
- cros支持所有形式的http请求
- 普通跨域：只需要服务器端设置Access-Control-Allow-Origin即可，前端无需设置
-
带cookie请求的跨域（简单请求）：前端设置withCredentials属性为true，服务器端响应必须携带Access-Control-Allow-Credentials：true的首部，而且服务器的Access-Control-Allow-Origin不能设置为*，而必须设置允许跨域访问的域名；
- 同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且（跨源）原网页代码中的document.cookie也无法读取服务器域名下的Cookie。
- 非简单请求
- 非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。
- 非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。
- 浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错
- 简单请求，满足：
-
- 请求方法是以下三种方法之一：
- HEAD
- GET
- POST
-
（2）HTTP的头信息不超出以下几种字段：
- Accept
- Accept-Language
- Content-Language
- Last-Event-ID
- Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
-
3. nginx反向代理
- 原理： 同源策略是浏览器的安全策略，不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不需要同源策略，也就不存在跨越问题
- 通过nginx配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录
- 配置：
- 找到nginx的配置文件"nginx.conf"
4. WebSocket协议跨域
- WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。
5. document.domain + iframe跨域
- 只限于主域相同，子域不同的跨域应用场景
- 两个页面都通过js强制设置document.domain为基础主域，就实现了同域
<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script>
document.domain = 'domain.com';
var user = 'admin';
</script>
- 子窗口：(http://child.domain.com/b.html)，通过window.parent获取变量
<script>
document.domain = 'domain.com';
// 获取父窗口中变量
alert('get js data from parent ---> ' + window.parent.user);
</script>
6. postMessage跨域
postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：
- 页面和其打开的新窗口的数据传递
- 多窗口之间消息传递
- 页面与嵌套的iframe消息传递
- 上面三个场景的跨域数据传递
- 用法：postMessage(data,origin)方法接受两个参数
- data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。
- origin： 协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。
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>
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>
7. window.name
- window对象有一个name属性，该属性有一个特征：即在一个窗口的生命周期内，窗口载入的所有的页面都是共享一个window.name的，每一个页面对window.name都有读写的权限，window.name是持久的存在于一个窗口载入的所有页面中的，并不会因为新的页面的载入而被重置。
网友评论