跨域问题解析

1 同源策略

同源的定义，两条URL同一协议protocol，同一端口port，同一主机地址host，则两个URL是同源的。
浏览器的同源策略是重要的安全机制，主要跨域规避一下重要问题，防止csrf攻击和xss攻击

2 CROS

一个W3C标准，跨域资源共享(Cross-origin resource sharing)，允许浏览器跨源向服务器进行请求不同源的资源。CROS需要浏览器和服务器同时支持，不过客户端浏览器会自动完成，所以只需要服务器实现CORS接口即可

两种请求

浏览器会把CORS请求分为两种，简单请求和非简单请求
同时为了兼容表单form的跨域请求功能，简单请求包括两个特点：

• 请求方法是下面三者之一
  • HEAD
  • GET
  • POST
• HTTP的头信息不超过一下几种字段
  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

2.1 简单请求

浏览器发现此次请求为跨域请求，请求Headers会自然带上Origin字段，其值为跨域的域名，浏览器会设置Access-Control-Allow-Origin 的字段，其值跨域指定具体的域名，也可是*，表示任意域名。
若Origin指定的域名在许可范围内，服务器返回的响应，会多出几个共同前缀 Access-Control头信息的字段：

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

• Access-Control-Allow-Origin：必填字段，它的值要么是请求时Origin字段的值，要么是一个*
• Access-Control-Allow-Credentials ： 可选字段，表示是否为发送cookie请求，浏览器CORS默认不带cookie，设为true时，表示服务器中可以接受带cookie的跨域请求
• Access-Control-Expose-Headers，CORS请求时，拿到的响应只能有六个字段Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma，若其他字段值，服务器需放在Access-Control-Expose-Headers中返回去

2.2 非简单请求

预检测请求

浏览器检测到是非简单请求，会自动会发出一次预检测请求，返回码是204，预检测通过才会真正发出请求，这才返回200。预检请求请求方法是OPTIONS，还有上文提到的Origin，除此之外还有

• Access-Control-Request-Method：必须的，说明浏览器的CORS请求会用到哪些HTTP方法
• Access-Control-Request-Headers：指定浏览器CORS请求会额外发送的头信息字段
  预检测信息的检验也有会返回一些特殊字段：

Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000

浏览器的正常请求和响应

一旦服务器通过预检测请求后，以后每次浏览器都和简单请求也有，带上Origin字段，服务器也会响应Access-Control-Allow-Origin 字段

3 JSONP

• JSONP是利用script标签没有跨域限制漏洞，网页跨域从其他域得到JSON数据。JSONP的请求也需要服务器支持
• JSONP简单兼容性好，但是仅支持get方法，有局限性，其会受到XSS攻击
• 实现流程：
  • 浏览器事先准备一个接受数据的全局函数
  • 浏览器解析到外联的script标签，发出请求
  • 服务端收到请求，返回函数调用
  • 客户端收到数据，执行回调

4 postMessage

postMessage是HTML5 的API，是跨域实现跨域操作的windows熟悉，跨域解决下面的问题：

• 页面和其打开的新窗口的数据传递
• 多窗口之间消息传递
• 页面与嵌套的iframe消息传递
• 上面三个场景的跨域数据传递
  -postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。
  otherWindow.postMessage(message, targetOrigin, [transfer]) 其中message是要发送到其他window的数据，targetOrigin是指定哪些窗口跨域接受

5 websocket