跨域解决方案 | 面试

跨域解决方案有哪些?

• JSONP 只能解决 GET 跨域

  原理: 动态创建一个 script 标签。利用 script 标签的 src 属性不受同源策略限制。因为所有的 src 属性和 href 属性都不受同源策略限制。可以请求第三方服务器数据内容。

• CORS 跨域资源共享

  原理: 服务器设置 Access-Control-Allow-Origin 响应头之后, 浏览器将会允许跨域请求

  限制: 浏览器需要支持 HTML5, 可以 POST PUT 等方法, 兼容 ie9 以上

  需要后台设置:

  Access-Control-Allow-Origin: * 		        //允许所有域名访问
  
  Access-Control-Allow-Origin: [http://www.juejin.cn]	//只允许该域名访问
  

• 设置 document.domain

  原理: 相同主域名不同子域名下的页面, 可以设置 document.domain 让他们同域

  限制: 同域 document 提供的是页面间的互操作, 需要载入 iframe 页面

• ES5 postMessage

  ES5新增的 postMessage() 方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递.

  语法: postMessage(data,origin)

• 使用 Apache 做转发(逆向代理), 让跨域变成同域