跨域获取数据

• 服务器中转请求
  • 同源策略只针对浏览器（客户端）
  • 通过同源服务器向不同源服务器发起请求数据
• 设置基础域名+IFRAME
  • 前提是基础域名必须一致
  • document.domain = ‘’
    • 当前网页所在的服务器域名

const ajaxDomain = (function () {
  function createIframe(frameId, frameUrl) {
    var frame = document.createElement('iframe');
    frame.src = frameUrl
    frame.id = frameId
    frame.style.display = 'none'

    return frame
  }

  return function (opt) {
    document.domain = opt.basicDomain;
    var frame = createIframe(opt.frameId, opt.frameUrl)
    frame.onload = function () {
      var $$ = document.getElementById(opt.frameId).contentWindow.$;

      $$.ajax({
        url: opt.url,
        type: opt.type,
        data: opt.data,
        success: opt.success,
        error: opt.error
      })
    }
    document.body.appendChild(frame)
  }
})()

• window.name + iframe
  • 每个浏览器窗口都有一个全局变量window（包含iframe框架contentWindow）
  • 每个window对象都有一个name属性（一个窗口只有一个name属性）
  • 该窗口被关闭前（生命周期内），所有页面共享一个name属性并有读写的权限
  • 无论该窗口在被关闭前，载入什么页面，都不会改变name值
  • 存储约为2M的字符串
  • 如果父级窗口地址源和iframe的地址源不同，父级无法通过iframe.contentWindow.name获取值，但iframe内部不受该限制规则影响
    • 解决方案：可以先让iframe中的页面程序保存window.name,然后跳转到父级窗口同源的另一个页面，父级页面可以从当前iframe拿到该页面的window.name
• postMessage+iframe
  • otherWindow.postMessage(data,targetOrigin)
    • otherWindow：接收方的引用
    • data：要传递的数据
    • targetOrigin：接收方的源，还必须要监听data事件
      • window.onmessage = function(){}
• hash+iframe
  • 利用url的hash值#xxx来传递数据
  • location.hash
• cors跨域
  • header(“Access-Control-Allow-Origin:*”)
• JSONP跨域