一、什么是跨域?
给出一个域名地址:http://www.google:8080/script/jquery.js
一个域名是由http://(协议号)、
www(子域名)、
google(主域名)、
8080(端口号)、
script/jquery.js(请求地址)组成
当协议、子域名、主域名、端口号中任意一各不相同时,都算不同的“域”。
不同的域之间相互请求资源时,就叫“跨域”。
比如:http://www.abc.com/index.html 请求 http://www.def.com/sever.php
二、处理跨域的第一种方法----代理
比如在北京和上海都有一台服务器,北京的后端直接访问上海的服务器进行数据获取,北京的前端只需要对北京的服务器进行数据请求即可返回数据;他属于后台的技术
2、实现跨域的第二种方法-----JSONP
假设在http://www.aaa.com/index.php这个页面中向http://www.bbb.com/getinfo.php提交GET请求,那么我们在www.aaa.com页面中添加如下代码:
1
2
3
4
5
6
7
|
var
eleScript= document.createElement(
"script"
);
//创建一个script元素
eleScript.type =
"text/javascript"
;
//声明类型、
document.getElementsByTagName(
"HEAD"
)[0].appendChild(eleScript);
//在页面中添加新创建的script元素
|
当GET请求从http://www.bbb.com/getinfo.php返回时,可以返回一段JavaScript代码,这段代码会自动执行,可以用来负责调用http://www.aaa.com/index.php页面中的一个callback函数。看下面一个列子:
在www.aaa.com页面中:
1
2
3
4
5
6
7
8
9
10
11
|
<script>
function
jsonp( json ){
document.write( json.name );
//输出周星驰
}
<script>
|
在www.bbb.com页面中:
jsonp({ "name":"周星驰","age":45 });
也就是在www.aaa.com页面中声明,在www.bbb.com页面中调用。但是JSONP只支持 “GET” 请求,但不支持 “POST” 请求。
JSONP的实现原理就是动态生成js文件,然后嵌入到html中进行渲染,从而实现跨域
但目前JSONP只支持get请求而不支持post请求;
在jquery中,将jsonp归入了ajax格式,而在本质上他们两个是不同的东西;ajax的核心是
通过XMLHttpRequest获取非本页内容,而jsonp的核心是动态添加。
3、实现跨域的第三种方法-----XHR2
“XHR2"全称“XMLHttpRequest Level2”,是HTML5提供的方法
IE10以下的版本都不支持
只需要在服务器端头部加上
header("Access-Contorl-Allow-Origin:*");
header("Access-Control-Allow-Methods:POST,GET");
两句代码。
- response.setHeader( "Access-Control-Allow-Origin:*" );
- response.setHeader( "Access-Control-Allow-Methods:POST,GET" );