跨域

因为浏览器出于安全考虑，有同源策略。协议、域名或者端口有一个不同就是跨域，Ajax请求会失败，我们可以通过以下几种常用方法解决跨域问题

jsonp

jsonp原理很简单，就是利用script标签没有跨域限制的漏洞，通过script标签指向一个需要访问的地址并且提供一个回调来接收数据

<script src="http://domain/api?param1=a&param2=b&callback=jsonp"></script>
<script>
  function jsonp(data) {
    console.log(data)
  }
</script>

jsonp使用简单兼容性不错，但只限于get请求。开发中可能遇到多个jsonp请求的回调函数名是相同的，这时就需要自己封装一个jsonp，以下为简单实现：

function jsonp(url, jsonpCallback, success) {
  let script = document.createElement('script')
  script.url = url
  script.async = true
  script.type = 'text/javascript'
  window[jsonpCallback] = function(data) {
    success && success(data)
  }
  document.body.appendChild(script)
}
jsonp('http://xxx', 'jsonp', function(value) {
  console.log(value)
})

CORS

Cross Origin Resource Share 跨域资源共享。需要浏览器和后端同时支持，IE8 9需要通过XDomainRequest来实现。

浏览器会自动进行CORS通信，实现CORS通信关键是后端，只要后端实现了CORS，就实现了跨域。

服务端设置Access-Control-Allow-Origin就可以开启CORS。该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源。

document.domain

该方式只适用于二级域名相同的情况，比如 a.test.com 和 b.test.com

只需要给页面添加 document.domain = 'test.com' 表示二级域名都相同就可以实现跨域

postMessage

这种方式通常用于获取嵌入页面汇总的第三方页面数据。一个页面发送消息，另一个页面判断来源并接受消息

// 发送消息端
window.parent.postMessage('message', 'http://test.com')

// 接收消息端
var mc = new MessageChannel()
mc.addEventListener('message', event => {
  var origin = event.origin || evet.originalEvent.origin
  if (origin === 'http://test.com') {
    console.log('验证通过')
  }
})