JavaScript多种跨域方式

时间 2019-11-11

标签 javascript 多种方式栏目 JavaScript 繁體版

原文原文链接

##JSONP方式javascript

这种方法即引入不一样源的脚本，该脚本载入后会调用全局的某个方法的，因此只要本页面提供该方法给它调用便可，从而达到跨域的目的。具体应用有jQuery.ajax的jsonp调用，也有script标签引入另外脚本的方式html

优势：兼容性好，不须要XMLHttpRequest或ActiveX的支持，在请求完毕后，能够经过调用callback回传结果前端

缺点：只支持GET请求而不支持POST等其它类型的HTTP请求；只支持跨域HTTP请求这种状况，不能解决不一样域的两个页面之间如何进行JavaScript调用的问题；毕竟是脚本注入的方式，因此有必定的安全隐患；java

##document.domainweb

在相同的一级域名/端口/协议等状况下，将俩不一样源的脚本的document.domain设置为同样的，便可达到跨域处理ajax

##window.name 在一个窗口或者iframe中，地址的跳转或变动，其window.name是不变的，利用这一特性来达到跨域传递数据的目的json

##HTML5 postMessage跨域

实现跨域POST请求浏览器

若在多个iframe之间跨域通讯，优先考虑 window.postMessage安全

在源a中的页面发送消息：

windowObj.postMessage(message, targetOrigin)

在源b中的页面接收消息：

var data = null
var windowObj = window
addEventListener("message", function(e){
    if("" === e.origin) { 
        data = e.data 
        e.source.postMessage("Get it", "*")
    }        
})

##实现跨域POST请求

参考连接

CORS，Cross-Origin Resource Sharing，W3C制定的跨站资源分享标准。客户端post时会带上Origin头指示来源网站，服务端响应时需带上Access-Control-Allow-Origin头与Origin头的值匹配，以示许可

Ajax提出了名为CORS的标准，打破同源策略的限制，赋予了前端代码访问可信的远程服务的权限。

作法：在服务器端设置Access-Control-Allow-Origin: "*"或指定域名"http://www.test.com"。详细来讲，添加受信任的服务器数据源，在HTTP的响应头加几行：

Access-Control-Allow-Origin: example.com
Access-Control-Request-Method: GET,POST

优势：W3C标准方案

缺点：不兼容老浏览器，IE>=8（需安装caveat）

invisible iframe, 经过js动态生成不可见表单和iframe，将表单的target设为iframe的name以此经过iframe作post提交。提交后因为跨域，没法直接读取响应内容。通常的作法是，iframe内经过js改变自身location的fragment，外部则监听iframe的onload事件，读取fragment的内容。有现成的跨域iframe通讯类库，如jQuery PostMessage Plugin

参考：利用form表单跨域post

server proxy
flash proxy

##双iframe方式（自创）

主应用在源a中运行，主应用提供一个全局的mainCallback回调函数。调用一个iframe嵌入源b的脚本，用它来处理问题，处理完毕后要调用mainCallback的回调函数，就再嵌入一个同源a的iframe，该iframe因为与主应用同源，因此直接调用top.mainCallback()便可实现跨域

参考文章：http://web.jobbole.com/83412/