解决跨域请求的几种常用方式

总结:    jsonp / iframe / window.name / cors / img.src

jsonp                                 


利用在页面中创建script节点的方法向不同域提交http请求的方法称为jsonp,首先在客户端注册一个callback,然后把callback的名字传给服务器,此时,服务器先生成json数据,然后以js语法的方式,生成一个function,function的名字就是传递上来的参数jsonp,最后将json数据直接以入参的方式,放置到function中,生成了一段js语法的文档,返回给客户端,客户端浏览器,解析script标签,并执行返回的js文档,此时数据作为参数,传入到了客户端预定义好的callback函数里。

var url = "http://localhost:8080/html5/jsonp_data.js";

// 创建script标签,设置其属性

var script = document.createElement('script');

script.setAttribute('src', url);

// 把script标签加入head,此时调用开始

document.getElementsByTagName('head')[0].appendChild(script);

function callbackFun(data)

{

console.log(data.age);

console.log(data.name);

}

服务器数据:callbackFun({"age":100,"name":"yuanfang"})

优点:兼容性更好,比XML轻了很多,可读性比较好

缺点:只支持get请求而不支持post请求等其他类型的http请求。只支持跨域http请求这种情况,不能解决不同域两个页面之间如何进行js调用的问题。

用法:在ajax请求中,设置dataType参数的值为jsonp

iframe                                       


iframe标签是框架的一种形式,ifram一般用来包含别的页面,作用就是让页面变得美观。iframe不推荐大量使用,但是某时候还是必要的,比如模拟窗口,或者html在线编辑器等

用法:和普通的标签相同

属性:

align:left、right、top、middle、bottom。用于规定如何根据周围的元素来对齐此框架。不赞成使用。请使用样式代替。

frameborder:1、0。用于规定是否显示框架周围的边框。

height:pixels、%。用于规定iframe的高度。

longdesc:URL。规定一个页面,该页面包含了有关iframe的较长描述。

marginheight:pixels。定义iframe的顶部和底部的边距。

marginwidth:pixels。定义iframe的左侧和右侧的边距。

name:frame_name。规定iframe的名称。

scrolling:yes、no、auto。规定是否在iframe中显示滚动条。

src:URL。规定在iframe中显示的文档的URL。

width:pixels。%。定义iframe的宽度。

优点:隔离上下文网页,便于更改,模块分离

缺点:影响网页加载速度

window.name


window对象有个name属性,该属性有个特征,在一个窗口的生命周期内,窗口在载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的,并不会因新页面的载入而进行重置。

用法:

在一个页面中设置window.name=“”;在另一个页面就可以获取window.name的值

window对象有个name属性,该属性有个特征,在一个窗口的生命周期内,窗口在载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的,并不会因新页面的载入而进行重置。

cors


跨域资源共享,是一种网络浏览器的技术规范,他为web服务器定义了一种方式,允许网页从不同的域访问其资源,系统定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求,有更大的灵活性,也更加安全。

优点:

cors支持所有类型的http请求

可以使用普通的XMLHTTPRequest发起请求和获得数据,比jsonp有更好的错误处理

jsonp只要被老的浏览器支持,它们不支持cors,但是大多数现代浏览器都已经支持了cors。

用法:

注意要配置服务器端对于cors的支持,只要是通过设置Access-Control-Allow-Origion来进行的,http://www.cnblogs.com/yuzhongwusan/p/3677955.html

function createCORSRequest(method, url) {

var xhr = new XMLHttpRequest();

if ("withCredentials" in xhr) {

// 此时即支持CORS的情况

// 检查XMLHttpRequest对象是否有“withCredentials”属性

// “withCredentials”仅存在于XMLHTTPRequest2对象里

xhr.open(method, url, true);

} else if (typeof!= "undefined") {

// 否则检查是否支持XDomainRequest,IE8和IE9支持

// XDomainRequest仅存在于IE中,是IE用于支持CORS请求的方式

xhr = new XDomainRequest();

xhr.open(method, url);

} else {

// 否则,浏览器不支持CORS

xhr = null;

}

return xhr;

}

var xhr = createCORSRequest('GET', url);

if (!xhr) {

throw new Error('CORS not supported');

}

img.src


所有具有src属性的html标签都是可以跨域的,包括img和script,img在更改src属性时就会发送请求,而script只有在添加到DOM树之后才会发送http请求

缺点:需要创建一个DOM对象,只能用于GET方法,只适合统计等用途,不能用于触发发表评论,删除文件等操作。

优点:方便收集信息,不阻塞页面加载,出错也不影响页面显示。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,923评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,154评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,775评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,960评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,976评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,972评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,893评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,709评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,159评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,400评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,552评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,265评论 5 341
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,876评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,528评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,701评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,552评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,451评论 2 352

推荐阅读更多精彩内容

  • 由于浏览器的同源策略保护机制,浏览器不能执行来自其他来源的脚本。通过js在不同的域之间进行数据传输或通信,比如用a...
    威少_吴阅读 1,381评论 0 2
  • 1. 什么是跨域? 跨域一词从字面意思看,就是跨域名嘛,但实际上跨域的范围绝对不止那么狭隘。具体概念如下:只要协议...
    他在发呆阅读 822评论 0 0
  • 1. 什么是跨域? 跨域一词从字面意思看,就是跨域名嘛,但实际上跨域的范围绝对不止那么狭隘。具体概念如下:只要协议...
    w_zhuan阅读 513评论 0 0
  • 跨域资源共享 CORS 对于web开发来讲,由于浏览器的同源策略,我们需要经常使用一些hack的方法去跨域获取资源...
    默默先生Alec阅读 589评论 0 0
  • 使用场景:在需要在本地服务器访问外部接口并获取外部接口返回的数据并操作本地数据库的情况 什么是跨域? 概念:只要协...
    安易学车阅读 8,416评论 0 1