跨域相关知识整理

跨域相关知识整理

跨域的定义及产生原因

当一个请求的协议、域名、端口号这三者之中有任意一个与当前页面不相同，就是跨域。跨域问题产生的原因是因为浏览器的同源策略限制。同源政策是浏览器最核心也是最基本的安全功能，如果没有同源策略，浏览器的正常功能可能都会受到影响。

非同源限制

1. 无法读取非同源页面的Cookie、LocalStorage和IndexDB
2. 无法解除非同源网页的DOM
3. 无法向非同源地址发送AJAX请求

解决跨域问题的方法

一、window.name跨域

可以设置window.name属性，然后结合iframe来进行跨域。通过iframe的src属性由外语转向本地域，跨域数据由iframe的window.name从外域传递到本地域，巧妙地避开了浏览器的跨域访问限制。

二、document.domain跨域

此方案今限于跨子域的应用场景
两个页面通过设置document.domain为基础主域，从而实现同域。

三、jsonp跨域

在html中，我们可以通过相应的标签加载不同域名下的静态资源，这个是被浏览器允许的，根据此原理，我们可以通过动态创建script，再请求一个带参数的网址实现跨域通信。
缺点：只能实现get这一种请求。

四、postMessage跨域

postMessage是HTML5 XMLHttpRequest Level 2种的API，是位数不多可以跨域操作的window属性之一，它可以用于解决以下几方面的问题：

1. 页面和其打开的新窗口的数据传递
2. 多窗口之间的消息传递
3. 页面与潜逃的iframe消息传递
4. 上面三个场景的跨域数据传递

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

五、nginx反向代理跨域

通过nginx配置一个代理服务器做跳板机，反向代理访问，并且可以顺便修改cookie中信息，方百年当前域cookie写入，实现跨域登录。
nginx配置

server {
	listen			81;
	server_name:	www.xxx.com;
	location / {
		proxy_pass		http://www.yyy.com:8080;  //反向代理
		proxy_cookie_domain		www.yyy.com www.xxx.com;  //修改cookie中的域名
		index	index.html index.html;

		add_header Access-Control-Allow-Origin	http://www.xxx.com;
		add_header Access-Control-Allow-Credentials true;
	}
}

六、CORS跨域

CORS是一个W3C标准，全称是跨域资源共享(Cross-origin resource sharing)。它允许浏览器向跨源服务器发送XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
跨域的目标需要返回一系列的Headers，通过这些Headers来控制是否同意跨域。CORS提供的Headers，在Request和Response中都有一部分：

#HTTP Response Header
Access-Control-Allow-Original
Access-Control-Allow-Credentials
Access-Control-Allow-Methods
Access-Control-Allow-Headers
Access-Control-Expose-Headers
Access-Control-Max-Age
#HTTP Request Header
Access-Control-Allow-Method
Access-Control-Allow-Headers

Access-Control-Allow-Headers一般包含基本字段：Cache-Control、Content-Language、Content-type、Expires、Last-Modified、Pragma，而其他字段，必须在Access-Control-Expose-Headers里面指定。