今天的一道面试题(17) - 讲一下跨域问题

感觉这个问题的出场率还是挺高的, 很多时候我们都知道就是那么回事, 但是语言组织上就是差点意思.

所以, 实在不行就背下来吧

阮一峰 - 浏览器同源政策及其规避方法
阮一峰- 跨域资源共享详解

为什么要跨域

为了保证用户信息的安全，防止恶意的网站窃取数据, 浏览器有同源策略。

同源策略,是浏览器对 JavaScript 实施的安全限制，只要协议、域名、端口有任何一个不同，都被当作是不同的域。

同源策略有三种行为被限制

（1） Cookie、LocalStorage 和 IndexDB 无法读取。

（2） DOM 无法获得。

（3） AJAX 请求不能发送。

常见的跨域方式

JSONP - 服务端配合更改格式

ajax 请求受同源策略影响，不允许进行跨域请求，而 script 标签 src 属性中的链 接却可以访问跨域的 js 脚本.
请求时, 服务端不再返回 JSON 格式的数据，而是 返回一段调用某个函数的 js 代码，在 src 中进行了调用，这样实现了跨域。

//动态创建 script
var script = document.createElement('script');

// 设置回调函数
function getData(data) {
    console.log(data);
}

//设置 script 的 src 属性，并设置请求地址
script.src = 'http://localhost:3000/?callback=getData';

// 让 script 生效
document.body.appendChild(script);

缺点就是需要服务端配合返回固定格式的数据

CORS - 服务端返回ACAO字段

全称是"跨域资源共享"（Cross-origin resource sharing）, CORS需要浏览器和服务器同时支持。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

简单请求

请求方法是以下三种方法之一：
HEAD
GET
POST

对于简单请求, 浏览器会在请求头中加上一个origin字段, 来说明本次请求来自哪个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求。

GET /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

如果Origin指定的域名在许可范围内，服务器返回的响应，会多出几个头信息字段。

//该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

非简单请求

非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。

非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为 "预检"请求（preflight）。

预检请求的请求方法是OPTIONS, 表示询问

OPTIONS /cors HTTP/1.1
Origin: http://api.bob.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

服务器收到"预检"请求以后，检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，确认允许跨源请求，就可以做出回应。如果否定了预检请求, 浏览器会报错

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
//关键字段, 表示允许跨域请求
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

当 预检请求通过后, 后面再发的请求就和简单请求一样了. 在请求头中增加一个origin字段, 服务器的回应也都会有一个Access-Control-Allow-Origin头信息字段

CORS和JSONP的对比

JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。

proxy代理 - 中间件解决跨域

在开发中, 经常用到的方式就是proxy代理进行跨域.

本质上, 请求服务端时, 域名不同不允许访问. 那么我们就使用第三方代理将域名变成相同的就可以访问了.

客户端发送请求时, 不直接到服务器, 而是先到代理的中间层
比如我们本地环境的域名是localhost：8088, 通过代理将域名转为和服务端域名一致, 就可以正常访问了.

document.domin - 基础域名相同 子域名不同

a.yy.com 与 b.yy.com
此时yy.com是基础域名，a.yy.com与b.yy.com是当前的域名。
若要两个实现跨域，需要指定document.domain=“yy.com”;

//设置完成后
//A网页
document.cookie = "test1=hello";

//B网页就可以读到响应的cookie了
var allCookie = document.cookie;

这种方法只适用于 Cookie 和 iframe 窗口

window.name - 同一个tab下的所有页面共享

同一个tab页, 只要没有被关闭, 不管跳转到哪个页面, 所有的页面都可以接收和设置window.name的值

所以各个tab页就可以使用window.name进行传递数据了

window.POSTMessage - 跨窗口通信

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

var popup = window.open('http://bbb.com', 'title');
popup.postMessage('Hello World!', 'http://bbb.com');

postMessage方法的第一个参数是具体的信息内容，第二个参数是接收消息的窗口的源（origin），即"协议 + 域名 + 端口"。也可以设为*，表示不限制域名，向所有窗口发送。

监听窗口消息

window.addEventListener('message', function(e) {
  console.log(e.data);
},false);