2016-03-20
在讲跨域之前就先讲讲域名,什么是域名以及域名的组成:
百度百科是这么定义域名的:
域名(Domain Name),是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位(有时也指地理位置,地理上的域名,指代有行政自主权的一个地方区域)。域名是一个IP地址上有“面具” 。比如百度的域名为:http://www.baidu.com,新浪的域名是http://www.sina.com.
上了上面的域名定义,那么就说说域名主要的组成:
用下面的域名作为例子:
http://www.baidu.com:8080/scripts/jquery.js
其中http://就是协议
www为子域名
baidu.com为主域名
8080端口号
scripts/jquery.js请求资源地址
那么什么叫不同域?
不同域就是当上述中的 协议、子域名、主域名、端口号中任意的一个不相同时,都算作不同域
而跨域就是:不同域之间相互请求资源,就是跨域
比如:http://www.baidu.com/index.html请求http:/www.sina.com/js.php就是跨域请求
javascript出于安全方面的考虑,步允许跨域调用其他页面的对象,什么是跨域?简单理解即使因为javascript同源策略的限制,即baidu.com域名下的js无法操作sina.com域名下的对象。
那么要实现跨域怎么办?
第一种办法~代理~
即通过在同域的web服务器短创建一个代理:
比如深圳的服务器 域名:www.shenzhen.com
广州的服务器 域名: www.guangzhou.com
那么要使用深圳的服务响应广州的服务怎办呢?
办法就是 在深圳的web服务器的后台
www.shenzhen.com/proxy-guangzhouservice.php来调用上海的服务器
www.guangzhou.com/service.php的服务器,然后再把响应结果返回给前端,这样前端调用深圳的域名服务器就和用广州的服务器效果一样了。
第二种办法~jsonp
使用jsonp可以解决主流浏览器get请求的数据跨域访问
在www.aaa.com叶敏中:
js代码:
function jsonpData(json){
console.log(json["name"]);
}
并引入<script src="http://www.bbb.com/jsonp.js"<</script>
在www.bbb.com页面中:
jsonp({
"name":"张三",
"sex":"男";
});
即bbb.com的域名去声明aaa.com去调用;
记住jsonp的方法只支持get请求对post前请求是不支持的。
第三种办法:XHR2
html5中提供了XMLHttpRequest Level2中已实现了跨域访问以及其他的一些新功能
但是对于IE10一下的版本不支持
在服务器短做一些小小的改造即可实现xhr2的跨域请求
header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Methods:POST,GET");