前端跨域及其解决方案

前端与服务端数据交互时，涉及到跨域的一些问题。javascript出于安全的考虑，禁止了跨域调用其它页面的对象，也即同源限制了一个源（origin）中加载文本或脚本与来自其他源（origin）中资源的交互方法。

什么是跨域？

如果两个页面拥有相同的协议（protocol），端口（如果指定），和主机，那么这两个页面就属于同一个源（origin），javascript允许这种同源页面的数据交互通信。

我们需要知道的一点，为什么跨域请求，正常情况下为什么不能起作用？

• 这里就要了解浏览器的一个安全策略，叫同源策略，同源策略让JavaScript或Cookie只能访问同域下的内容。最好的例子就是CSRF跨站攻击，同源策略可以比较好的防御这类攻击，不允许不同域（origin）的请求。具体同源策略和CSRF跨站攻击等相关网络安全知识不展开细讲。不过还是希望读者有精力去学习和了解下。

• 下表给出了相对http://h5.jd.com/dir/ajax.js:

URL	是否允许通信	原因
http://h5.jd.com/dir/zepto.js	允许	同源
http://h5.jd.com/dir2/react.js	允许	同源
https://h5.jd.com/jquery.js	不允许	协议
http://h5.jd.com:8080/vue.js	不允许	端口
http://m.jd.com/angular.js	不允许	主机

• 同源策略有效的防范网络攻击，但在实际开发项目中，不可避免需要的进行跨域操作，所以我们需要一些“合法的” 跨域请求方案。对于端口和协议的不同，只能通过后台处理，下面我们说说主机不同情况实现跨域。

JSONP

JSONP 是比较流行的跨域处理方式，网络上的定义：JSONP（JSON with Padding）是资料格式JSON 的一种“使用模式”，可以让网页从你别的网域要资料。

• 原理：浏览器请求script 资源不受同源策略限制，并且请求到script资源后立即执行。
• 优点：
  • 不受浏览器兼容性的限制。
  • 它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；
  • 它在请求完毕后可以通过调用callback的方式回传结果，方便调用。

• 缺点：

  • 只能发送 GET 请求，不能提交大量数据；
  • 需要服务端和前端规定好，写法丑陋。
  • 它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

• 实例使用

1. 浏览器端：

   <script src="http://jd.com/data.php?callback=dosomething"></script>
   <script type="text/javascript">
       function dosomething(jsondata){
           console.log(jsondata);//打印获得的json数据
       }
   </script>

当js文件载入成功后，会执行我们在 url 参数中制定的函数（dosomething），并且会把我们需要的json数据（jsondata）作为参数传入。但这需要服务器端进行配合，下面讲一下服务器该如何配合。

1. 服务器：

   • 在接收到浏览器端的script请求后，从url 的query 的callback获取回调函数的名字，然后动态生成一段javascript片段（callback(json)）去给这个函数传入参数执行这个函数。
   • 如上例：生成这一javascript字段

     dosomething({'name':'张三',sex:'男',age:'15'});

2. 执行

• 服务器端返回这个script之后，浏览器获取到script资源，然后立即执行这个javascript，就可以根据之前写好的回调函数处理这些数据了。

4.如果你使用jquery或者zepto，那么通过它封装的方法就能很方便的来进行JSONP操作了。

$.ajax({
  type: 'GET',
  url: 'http://jd.com/data',
  // 需要提交给服务端的数据:
  data: { name: '张三' },
  // 指定数据类型:
  dataType: 'jsonp',
  timeout: 300,
  success: function(data){
    // 成功接收到这个JSON:
    // {'project':{'name':'张三',sex:'男',age:'15'}}
    // 把数据插入到HTMl DOM中
    this.append(data.project.html)
  },
  error: function(xhr, type){
    alert('数据获取失败！')
  }
})
// 或者使用$.getJSON
$.getJSON('http://jd.com/data?callback=?,function(data)'){
    //处理获得的json数据
});

jquery/zepto会自动生成一个全局函数来替换callback=?中的问号，之后获取到数据后又会自动销毁，实际上就是起一个临时代理函数的作用。$.getJSON方法会自动判断是否跨域，不跨域的话，就调用普通的ajax方法；跨域的话，则会以异步加载js文件的形式来调用jsonp的回调函数。

CORS

W3C 推荐了一种更为先进的机制，也就是 CORS（Cross-Origin Resource Sharing） 跨域资源共享，定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。

• CORS的工作原理和相关规范可以看[CORS：跨域资源共享] W3C的CORS Specification 和 官方文档

• CORS背后的基本思想:

  • 使用自定义的HTTP头部，让 服务器能声明 哪些来源可以通过浏览器访问该服务器上的资源，从而决定请求或响应是应该成功还是失败，CORS本身并非绝对很安全，可利用OAuth2措施来加强保障.

//服务器需要声明这么一条响应头，即可轻松跨域
//PHP中的 hander() 设置，“*”号表示允许任何域向我们的服务端提交请求：
header("Access-Control-Allow-Origin: *")
//也可以设置指定的域名，如域名 http://h5.jd.com ，那么就允许来自这个域名的请求：
header("Access-Control-Allow-Origin: http://h5.jd.com")

• 兼容性表：
  

• 使用 CORS 跨域的时候其实和普通的 ajax 过程是一样的，只是浏览器在发现这是一个跨域请求的时候会自动帮我们处理一些事，比如验证等等，所以说只要服务端提供支持，前端是不需要做额外的事情的。

两种请求

CORS 的请求分两种，这也是浏览器为了安全做的一些处理，不同情况下浏览器执行的操作也是不一样的，主要分为两种请求，当然这一切我们是不需要做额外处理的，浏览器会自动处理的。

简单请求

条件

满足以下两大条件，就属于简单请求。

1) 请求方法是以下三种方法中的一个：
    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

过程

• 对于简单的跨域请求，浏览器会自动在请求的头信息加上 Origin 字段，表示本次请求来自哪个源（协议 + 域名 + 端口），服务端会获取到这个值，然后判断是否同意这次请求并返回。

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

1. 服务端允许

如果服务端许可本次请求，就会在返回的头信息多出几个字段：

// 返回
Access-Control-Allow-Origin: http://api.qiutc.me
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: Info
Content-Type: text/html; charset=utf-8

这三个带有 Access-Control 开头的字段分别表示：

Access-Control-Allow-Origin

• 必须。它的值是请求时Origin字段的值或者 *，表示接受任意域名的请求。
  Access-Control-Allow-Credentials；
• 可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。
  再需要发送cookie的时候还需要注意要在AJAX请求中打开withCredentials属性：var xhr = new XMLHttpRequest(); xhr.withCredentials = true;
  需要注意的是，如果要发送Cookie，Access-Control-Allow-Origin就不能设为*，必须指定明确的、与请求网页一致的域名。同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且原网页代码中的document.cookie也无法读取服务器域名下的Cookie。
  Access-Control-Expose-Headers
• 可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader(‘Info’)可以返回Info字段的值。

1. 服务端拒绝

当然我们为了防止接口被乱调用，需要限制源，对于不允许的源，服务端还是会返回一个正常的HTTP回应，但是不会带上 Access-Control-Allow-Origin 字段，浏览器发现这个跨域请求的返回头信息没有该字段，就会抛出一个错误，会被 XMLHttpRequest 的 onerror 回调捕获到。

这种错误无法通过 HTTP 状态码判断，因为回应的状态码有可能是200

非简单请求

条件

出了简单请求以外的CORS请求。

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

过程

1. 预检请求

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

• 浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

• 预检请求的发送请求：

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

“预检”请求用的请求方法是OPTIONS，表示这个请求是用来询问的。头信息里面，关键字段是Origin，表示请求来自哪个源。

除了Origin字段，”预检”请求的头信息包括两个特殊字段。

Access-Control-Request-Method
该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法，上例是PUT。
Access-Control-Request-Headers
该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段，上例是X-Custom-Header。
预检请求的返回：

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.qiutc.me
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

Access-Control-Allow-Methods
必需，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次”预检”请求。

Access-Control-Allow-Headers
如果浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在”预检”中请求的字段。
Access-Control-Max-Age
该字段可选，用来指定本次预检请求的有效期，单位为秒。上面结果中，有效期是20天（1728000秒），即允许缓存该条回应1728000秒（即20天），在此期间，不用发出另一条预检请求。

1. 浏览器的正常请求和回应

一旦服务器通过了”预检”请求，以后每次浏览器正常的CORS请求，就都跟简单请求一样，会有一个Origin头信息字段。服务器的回应，也都会有一个Access-Control-Allow-Origin头信息字段。

参考：《跨域资源共享 CORS 详解》http://www.ruanyifeng.com/blog/2016/04/cors.html

document.domain

• 我们知道，一个页面框架（iframe／frame）之间（父子或同辈），是能够获取到彼此的window对象的，但是这个 window 不能拿到方法和属性。这个时候，document.domain就可以派上用场

• 前提条件：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致。

• 但要注意的是，document.domain 的设置是有限制的，我们只能把 document.domain 设置成自身或更高一级的父域，且主域必须相同。

  • 例如：a.b.example.com 中某个文档的 document.domain 可以设成a.b.example.com、b.example.com、example.com中的任意一个，但是不可以设成 c.a.b.example.com,因为这是当前域的子域，也不可以设成baidu.com,因为主域已经不相同了。

• 使用实例：

// 主页面：http://blog.qiutc.me/a.html
<script>
document.domain = 'qiutc.me';
function onLoad() {
	var iframe =document.getElementById('iframe');
	var iframeWindow = iframe.contentWindow;
	// 这里可以获取 iframe 里面 window 对象并且能得到方法和属性
	var doc = iframeWindow.document; // 获取到
}
</script>
<iframe src="http://www.qiutc.me/b.html" onload="onLoad()"</iframe>

// iframe 里面的页面
<script>
document.domain = 'qiutc.me';
</script>

其他跨域方案

• window.name：

在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的。

• window.postMessage：

该方法是 HTML5 新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

• 动态创建script

JSONP也就是利用这个原理。

• 利用iframe和location.hash

淘汰类技术

• 利用flash

淘汰类技术

reference

• 前端跨域及其解决方案
• 跨域资源共享 CORS 详解
• 前端跨域的整理