同源策略_()

首先解释  源 ：协议、域名、端口号。
                只有三者都一样浏览器才能访问，否则就是跨域请求。

 

 

1、设置后台服务器允许跨域请求（CORS）

 CORS 需要浏览器和后端同时支持。IE 8 和 9 需要通过 XDomainRequest 来实现。

2、JSONP：原理利用script标签的src属性具有开放性原则。只有get请求

       封装了一个JSONP函数，重点是有一个callback = 函数名（回调函数）。

        /** 发送jsonp请求
   * 
   * @param url     <string>  接口的路径
   * @param cbName  <string>  回调函数名
   * @param [query] <object>  其他的一些参数
   */
  jsonp (url, cbName, query) {
    // 创建script标签
    url += `?cb=${cbName}`
    if (query) {
      for (var key in query) {
        url += `&${key}=${query[key]}`
      }
    }
    var script = document.createElement('script')
    script.src = url
    document.body.appendChild(script)
    // 一旦script存在，请求就发出去了，script就没用了，可以直接删掉
    document.body.removeChild(script) // 过河拆桥
  }
}

3、document.domain

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

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

4.webpack配置proxyTable设置开发环境跨域

5.nginx代理跨域

6.iframe跨域

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