码迷,mamicode.com
首页 > 其他好文 > 详细

跨域问题

时间:2019-10-07 19:40:18      阅读:104      评论:0      收藏:0      [点我收藏+]

标签:使用方法   出错   响应   发送   figure   div   ESS   highlight   xmlhttp   

当我们在页面中通过ajax 请求其他服务器数据时,由于浏览器对于JavaScript的同源策略,客户端就会发生跨域问题。所谓同源策略,指的是一段脚本只能请求来自相同来源(相同域名,端口号,协议)的资源。
如果上面XMLHttpRequest请求的服务地址与当前文件不同源的话,浏览器就会出现错误:
那么如何解决这类跨域问题?
(1)利用CORS跨域
“跨域资源共享”(Cross-origin resource sharing,简称CORS)。CORS是在XHR2中拓展能力,使用方法很简单,在服务端设置:
Header set Access-Control-Allow-Origin *
这种设置将接受所有域名的跨域请求,也可以指定具体网址,也可以对域名进行限定:
Header set Access-Control-Allow-Origin http://www.test.com
然而,这种方式的局限性在于要求客户端支持,并且服务端进行相关设置。在这两者满足的条件下,进行CORS进行跨域不仅支持所有类型的HTTP请求,而且开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有更好的错误处理。
(2)利用JSONP实现跨域
对于较老的浏览器,它们往往不支持CORS,因此使用JSONP进行跨域也是很常见的一种方式。
JSONP实现的原理如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
funciton getJSONP(url,callback){
var funcName = getUniqueName(); //利用时间戳或者自增计数器获得唯一函数名
url += "?callback" + funcName; //将函数名作为参数添加至url中
var script = document.createElement('script') //动态构建script标签
getJSONP[funcName] = function(response){
try{
callback(response) //处理响应数据
}
finally{
//即使回调函数或响应抛出错误,清除动态增加内容
delete getJSONP[funcName];
script.parentNode.removeChild(script)
}
}
//触发HTTP请求
script.src = url;
document.body.appendChild(script);
}

JSONP也存在一些弊端,首先JSONP支持GET不支持POST方法,另外使用script元素进行Ajax请求,这意味着允许web页面可以执行远程服务器发送过来的任何JavaScript代码,因此对于不信任的服务器,不应该采用该技术。
(3)利用window.name进行跨域
window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每一个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的,并不会因新页面的载入而进行重置,因此可以借助window.name在不同源的页面中传递数据
如www.a.com/a.html想要获得www.b.com/b.html中的数据,原理如下
1)在b.html中将数据存储在window.name中
2)在a.html中构建一个隐藏(display:none)的iframe标签,假设id设为proxy,src设置位h和a.html同源即可。
3)通过如下代码在a.html中获取到data

1
2
3
4
var proxy = document.getElementById('proxy');
proxy.onload = function(){
var data = proxy.contentWindow.name; //获取到数据
}

4) 移除相关元素
(4)使用window.postMessage进行跨域
这种方式比较简单,在a页面中利用windowObj.postMessage(message,targetOrigin)向目标页面发送信息,而在b页面中通过监听message事件获取信息。这种方式是在HTML5中新增的方法,对于IE6,IE7等老版本浏览器无法使用。

原文:大专栏  跨域问题


跨域问题

标签:使用方法   出错   响应   发送   figure   div   ESS   highlight   xmlhttp   

原文地址:https://www.cnblogs.com/wangziqiang123/p/11631478.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!