前端跨域的理解和解决方案

何为跨域？

首先，我们得先理解一下何为跨域？所谓跨域，即网站的协议名 protocol（例如 http ://）、域名 host （例如：www.example.com）、端口号 port (例如 80 ，默认端口可以省略) 这三个中的任意一个不同，网站之间的数据传输或者请求就属于跨域请求了。

这是由于浏览器的同源策略，为了防范跨站脚本的攻击，禁止客户端脚本对不同域的服务进行跨站调用，但是跨域并非浏览器限制了发起跨站请求，而是跨站请求可以正常发起，但返回结果被浏览器拦截了。有些浏览器不允许从HTTPS协议的域跨域访问 HTTP协议，比如Chrome和Firefox，这些浏览器在请求还未发出的时候就会拦截请求，这是一个特例。如果是非同源，共有三种行为受到限制：（1）cookie、LocalStorage 和 IndexDB 无法读取；（2）DOM 无法获得；（3）AJAX请求不能发送。

【这里再解释一下同源（具体定义可以查看 MDN），如果两个页面的协议，端口（如果有指定）和域名都相同，则两个页面具有相同的源。IE 有例外，一是授信范围：两个相互之间高度互信的域名，不遵守同源策略的限制；二是端口：IE 未将端口号加入到同源策略的组成成分中。更多有关源的介绍可以查看 MDN ：https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy】

如何去解决？

接着，既然我们知道了何为跨域，跨越有时候在实际的开发中有时候又无法避免，下面介绍几种常见的跨域方法：

1、利用 JSONP 实现跨域

JSONP（JSON with Padding）是 JSON 的一种“使用模式”。利用 JSON 实现跨域的原理是：HTML 的 script 标签是不受同源策略的限制的，可以通过 script 标签加载并执行其他的域的 js 文件的。

例如通过 jQery 封装的方法可以很方便地进行 JSONP 的操作：

$.ajax({
  type: 'GET',
  url: 'http://jjjjjjjj.com/data',
  // 需要提交给服务端的数据:
  data: { name: '燕子' },
  // 指定数据类型:
  dataType: 'jsonp',
  timeout: 300,
  success: function(data){
    this.append(data.project.html)
  },
  error: function(xhr, type){
    alert('数据获取失败！')
  }
})

//使用$.getJSON
$.getJSON('http://jjjjjjjj.com/data?callback=?,function(data)'){
    //处理获得的json数据
});

总结：

JSONP 的兼容性好，在更古老的浏览器都可以运行，不需要 XMLHTTPRequest 或 ActiveX 的支持，并且在请求完毕后可以通过调用 callback 的方式回传结果；
然而缺点是，它只支持 GET 请求而不支持 POST 等其他类型的 HTTP 请求；还有只支持跨域 HTTP 请求这种情况，不能解决不同域的两个页面的之间 JavaScript 调用的问题；

2、利用 CORS 实现跨域

CORS （Cross-Origin Resource Sharing）跨域资源共享，定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。CORS 背后的思想是使用自定义的 HTTP 头部，让服务器能声明哪些来源可以通过浏览器访问该服务器上的资源，从而决定请求或响应是应该成功还是失败，CORS 本身并非绝对的安全，可利用 OAuth2 加强保障。（更多关于 CORS 的详解可以查看阮一峰老师的一篇文章：跨域资源共享 CORS 详解）

header("Access-Control-Allow-Origin: *")       //“*”号表示允许任何域向我们的服务端提交请求

header("Access-Control-Allow-Origin: http://jjjjj.jd.com")      //也可以设置指定的域名

与 JSONP 相比，CORS 更为先进、方便：

CORS 支持所有类型的 HTTP 请求；
使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理；
绝大多数现代浏览器都已经支持了CORS；

3、window.name

当window 的 loaction 变化时，页面重新加载，它的 name 属性可以依然保持不变。每个页面的对 window.name 都有读写权限，window.name 是持久存在一个窗口载入过所有页面中的。我们可以在页面 A中用iframe加载其他域的页面B，而页面B中用JavaScript把需要传递的数据赋值给window.name，iframe加载完成之后（iframe.onload），页面A修改iframe的地址，将其变成同域的一个地址，然后就可以读出iframe的window.name的值了（因为A中的window.name和iframe中的window.name互相独立的，所以不能直接在A中获取window.name，而要通过iframe获取其window.name）。这个方式非常适合单向的数据请求，而且协议简单、安全。不会像JSONP那样不做限制地执行外部脚本。

4、document.domain 跨域（只适用于不同子域的框架间的交互）

同源策略不能用 ajax 方法去请求不同源的文档，还有一个限制就是浏览器不同域的框架之间不能进行 JS 的交互操作的，不同的框架可以获取 window 对象，但无法获取相应的属性和方法。

这个时候，我们可以通过把两个页面的 document.domain 都设成相同的域名就可以，不过 window.domain 的设置也是有限制的，只能把 window.domain 设置成自身或更高一级的父域，且主域必须相同

5、HTML5 的 postMessage 方法

高级浏览器Internet Explorer 8+, chrome，Firefox , Opera 和 Safari 都将支持这个功能。这个功能主要包括接受信息的"message"事件和发送消息的"postMessage"方法。

window.postMessage() 方法被调用时，会在所有页面脚本执行完毕之后（例如：在该方法之后设置的事件、之前设置的timeout 事件）向目标窗口派发一个 MessageEvent 消息。该 MessageEvent 消息有四个属性需要注意： message 属性表示该 message 的类型； data 属性为 window.postMessage 的第一个参数；origin 属性表示调用 window.postMessage() 方法时调用页面的当前状态； source 属性记录调用 window.postMessage() 方法的窗口信息。

详细语法可参考 MDN 文档：window.postMessage