跨域的几种方法

什么是跨域

浏览器出于安全方面的考虑，只允许客户端与本域（同协议、同域名、同端口，三者缺一不可）下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源，这被称为同源策略。

同协议：如都是http或者https
同域名：如都是http://xxx.com/a和http://xxx.com/b
同端口：如都是8080端口

而有时候，我们不得不在一个客户端下访问不同域中的资源，于是需要用到一些方法来避开浏览器的同源策略，这些方法被称为跨域。
实现跨域有如下几种方法：

1. JSONP

JSONP（JSON with Padding）是数据格式JSON的一种使用模式，可以使网页实现跨域请求。其原理主要利用了 HTML的script标签。由于script是采用开放策略，通过设置src引入不同域下的资源，所以可以通过script实现跨域，该方法需要后端支持。jsonp跨域的实现步骤如下：

• 首先客户端定义一个数据处理函数fun，用于处理后端服务器返回的数据。
• 创建一个script标签，并将script的src设置为后端接口，并在最后加一个参数callback=fun。
• 服务端在收到由 script标签发出的请求后，会解析请求参数，获取callback对应的fun的字符串，然后将要返回的数据data与fun拼接为一个'fun(data)'的字符串，返回客户端。
• 客户端拿到响应后会放到script标签里执行，此时会调用fun函数，参数为data。

下面来做个演示，首先为演示方便，将系统的hosts做如下修改：

127.0.0.1 example.a.com
127.0.0.1 example.b.com

服务器端（用server-mock启动，保存图片的url地址数据）：

客户端（展示随机图片）：

请求结果：

以上例子最终实现了由example.a.com到example.b.com的跨域。应注意的是，因为<script>只能发送GET请求，所以jsonp只能实现GET请求的跨域。如果希望能实现其他请求的跨域，就可以用接下来介绍的一种方法——CORS。

2.CORS

CORS（全称为：Cross-Origin Resouce Sharing）跨域资源共享，是一种通过ajax跨域请求资源的方法。浏览器将CORS请求分为两大类，简单请求（simple request）和非简单请求（not-so-simple request，浏览器对这两种请求的处理方式不一样。如果请求满足以下两个条件，则为简单请求。

• 请求方式为HEAD，GET，POST三者中第一个。
• HTTP头部信息不超过以下几种字段：
  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain。

简单请求的实现方式即当用XMLHttpRequest发请求时，浏览器如果发现该请求不符合同源策略，会给该请求加上一个请求头origin，origin用来说明本次请求来自哪个源（协议+域名+端口）。如果origin指定的源不在后台允许范围内，后台会返回一个正常的HTTP响应，然后浏览器会发现该响应头部信息不包含Access-Control-Allow-Origin字段，然后抛出一个错误，该错误被XMLHttpRequest的onerror函数捕获，响应被驳回，但因为该错误无法通过状态码识别，所以HTTP回应的状态码还是200。如果origin在后台允许范围内，则服务器返回的响应，会包含Access-Control-Allow-Origin：Origin（指定的源）信息，浏览器此时不会抛错，响应能正常处理。
非简单请求是是请求方法为PUT或DELETE，又或者Content-Type为application/json的对服务器有特殊要求的请求。非简单请求的CORS请求，会在正式通信前增加一次HTTP查询，称为预检（preflight），询问服务器当前网页所在域名是否在服务器的许可名单中，如果在，则发出正式的XMLHttpRequest，之后就与简单请求一样，不在则报错。
依旧用上面的例子。

服务器端（设置一个响应头，里面包含了允许请求的域名信息）

客户端（用ajax发请求）

最终实现的效果与第一个jsonp的例子一样。

3.降域

还有一种方式，就是通过降域来实现跨域。即通过设置document.domain的方式，将两个域名的domain设置为一个，如对于a.example.com和b.example.com，可以通过js设置document.domain = "example.com"，实现跨域。
做个演示，假设在http://a.example.com:8080下有一个a.html文件，其中a.html中有一个iframe，它的src为http://b.example.com:8080/b.html。

正常情况下，由于a.html，b.html不同源，他们之间无法正常通信，但在设置document.domain = "example.com"后，两边可以互相通信。
最终效果如下：

用降域方法实现跨域操作简单，但是有一些缺点。比如域名只能往下设置，不能回去，比如从example.com回到a.example.com。同时如果一个子域名被攻击，多个被降域的域名都会被连带攻击，有很大的安全风险。

4.postMessage

postMessage是一个web API，可以实现跨域通信。window.postMessage()被调用时，会在所有页面脚本执行完毕后，向目标窗口派发一个MessageEvent消息。语法如下：

otherWindow.postMessage(message, targetOrigin, [transfer]);

• otherWindow表示目标窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或通过数值索引的window.frames。
• message表示需要发送到目标窗口的数据。
• targetOrigin决定了哪些窗口可以接收消息，其值可以是字符串"*"（表示无限制）或者一个URI。
• transfer是一串和message同时传递的Transferable 对象，这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

MessageEvent具有如下属性：

• message属性表示该message的类型。
• data属性为window.postMessage的第一个参数；
• origin 属性表示调用window.postMessage()方法时调用页面的当前状态；
• source 属性记录调用window.postMessage()方法的窗口信息。

用一个与上面降域类似的例子来做演示。同样有两个页面a.html和b.html，a.html中的iframe的src指向b.html。

最终实现a.html与b.html通信效果如下：

使用postMessage方法应注意的是，如果不希望从其他网站接收message，那么不要为message事件添加任何监听器。如果确实希望接收其他网站的message，那么应该始终使用origin和source属性来验证发件人的身份，以免被恶意的网站攻击。

小结

以上就是几种常见的跨域方法，各有优劣，且各自都有一定的安全问题，在日常应用中，需要有针对性的使用，对可能的安全风险采取相应措施。