CORS 跨域解决方案简单介绍
名词解释
同源策略
在Web浏览器中，允许某个网页脚本访问另一个网页的资料，但前提是这两个网页必须有相同的URI、主机名称和端口号。一旦两个网站满足上述条件，这两个网站就被认定为具有相同来源。此策略可防止某个网页上的恶意脚本通过该页面的文档物件模型访问另一网页上的敏感性资料。
CORS
跨源资源共享 (Cross-origin resource sharing) 用于让网页的受限资源(图片、样式、脚本、iframes以及视频)能够被其他域名的页面访问的一种机制。
浏览器支持
- Chrome 3
- Firefox 3.5
- Opera 12
- Safari 4
- IE 8 (IE 11 才完全支持)
CORS请求操作
简单请求
- 满足两个条件
- 请求方法为：HEAD、GET、POST
- HTTP的头信息不超出以下几种：
- Accept
- Accept-Language
- Content-Language
- Last-Event-ID
- Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
范例
代码语言：javascript复制$.ajax({
type:'post',
url:'https://example.com',
data:{
'data': '简单请求'
},
success:function(response){
//do someting
},
error:function(jqXHR, textStatus, errorThrown){
//do someting
}
});非简单请求
- 满足条件
- 非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为”预检”请求（preflight）。
PHP接收 CORS 注意事项
允许单个网域访问
代码语言：javascript复制header("Access-Control-Allow-Origin:http://example.com");允许单个页面访问
代码语言：javascript复制header("Access-Control-Allow-Origin:http://example.com/example.html");允许多个网域访问
代码语言：javascript复制$origin = filter_input(INPUT_SERVER, 'HTTP_ORIGIN');
$allowOrigin = array(
//允许访问的网域
'http://example1.com',
'http://example2.com'
);
in_array($origin, $allowOrigin) && header("Access-Control-Allow-Origin:" . $origin);与JSONP的比较
CORS | JSONP | |
|---|---|---|
浏览器 | 对浏览器版本有要求 | 支持老式浏览器 |
请求类型 | 所有类型的HTTP请求 | GET请求 |
请求次数 | 非简单请求两次 | 一次 |
