JavaScript多种跨域方式

最新推荐文章于 2024-08-14 15:45:18 发布

weixin_34081595

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量64

点赞数

文章标签： javascript 前端 ViewUI

原文链接：https://my.oschina.net/luozt/blog/501425

版权

为什么80%的码农都做不了架构师？>>>

##JSONP方式

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

优点：兼容性好，不需要XMLHttpRequest或ActiveX的支持，在请求完毕后，可以通过调用callback回传结果

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

##document.domain

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

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

##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/

转载于:https://my.oschina.net/luozt/blog/501425