跨域问题的解决

跨域:不同域之间相互请求资源

javaScript处于安全方面的考虑,不允许跨域调用其他页面的对象。

什么是跨域呢? 简单地理解就是因为javaScript同源策略的限制,a.com域名下的js无法操作b.com或是c.a.com域名下的对象
事实上HTTP和HTTPS两个协议的url看上去都可以省略端口号,但是他们访问的默认端口不同

同源策略:两者拥有相同的协议、域名和端口时,就属于同一个源(origin)(或者说同一个域);XHR请求不能跨域访问和调用。

HTTP默认访问80端口,HTTPS默认访问443端口,所以http访问https肯定是跨域

域名地址的组成:

1、完整的url:http://www.imooc.com:8080/video.php?id=001#mediaid=6238

2、协议(protocol):http://

3、主机(host):www.imooc.com:8080

4、主机名/域名(hostname):www.imooc.com
子域名:www
主域名:imooc.com

5、端口(port):8080

6、请求路径(pathname):video.php

7、请求参数(search):id=001

8、哈希码(hash):#mediaid=6238

主域名:
abc.com

主域名可以有如下的子域名:

www.abc.com

bbs.abc.com

beijing.bbs.abc.com

haidian.beijing.bbs.abc.com

处理跨域方法之代理

通过在同域名的web服务器端创建一个代理

北京服务器(域名:www.beijing.com)

上海服务器(域名:www.shanghai.com)

比如在北京的web服务器的后台(www.beijing.com/proxy-shanghaiservice.php)来调用上海服务器(www.shaghai.com/service.php)的服务,然后再把响应结果返回给前端,这样前端调用北京同域名的服务就和调用上海的服务效果相同了。

处理跨域方式之JSONP

a域名声明一个方法,b域名去调用该方法
script可以向不同页面提交http请求;
jsonp的方式只是针对get请求方式,不支持post请求

$.ajax({
type:"GET",
url:"http://127.0.0.1:8080/ajaxdemo/service.php?number"+$("#keyword").val(),
dataType:"jsonp", //由"json"改为"jsonp"
jsonp:"callback", //增加jsonp属性,并指定名称,用于后台的调用
success:function(data){
if(data.success){
$("#searchResult").html(data.msg);
}
else{
$("#searchResult").html("出现错误");
}
},
error:function(er){
alert(er.status);
}
});
$jsonp = $_GET["callback"];
$result = '()';

后端代码改造:
在search()函数中加入代码$jsonp=$_GET[“前端所取的jsonp的名字”]

注意:$result=$jsonp.’(……)’
jsonp连接是用点(.),并且里面的值要用括号括起来

处理跨域的方法之XHR2:

  • HTML5提供的XMLHttpRequest Level2已经实现了跨域访问以及其他的一些新功能

  • IE10以下的版本都不支持

  • 在服务器端添加代码

header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:POST,GET');

具体demo在 AjaxDemo

(完)

分享到