Cross-Origin Resource Sharing（CORS）详解，CORS详解，CORS原理分析

Cross-Origin Resource Sharing（CORS）详解，CORS详解，CORS原理分析
Cross-Origin Resource Sharing 通常简称为：CORS
它是一种机制，这个机制使用了一个额外的HTTP响应头来赋予当前user-agent（浏览器）获得在当前源（origin）下使用非同源资源的权限。
非同源就是Cross-Origin的概念，这里边的权限就是访问非同源的资源权限

出于安全的原因，浏览器限制从脚本内发起跨源的HTTP请求，也就意味着限定了当前web应用程序只能请求与当前同域（同源）的HTTP资源，除非使用CORS头信息

CROS头信息设置
举例：我们访问的是 http://www.myapp.com/index.html 页面，那么当前的origin就是 http://www.myapp.com。 而这个页面中的脚步请求的资源是 http://www.other.com/goods.json ，根据上文介绍的信息我们可以得知：这个是非同源的请求，且属于浏览器拦截名单里边的请求形式。所以我们需要通过设置CROS头信息来完成跨域调用。

1.Access-Control-Allow-Origin 头信息设置
本例中，我们需要在http://www.other.com/goods.json所对应的服务器代码中加入响应头：

Access-Control-Allow-Origin: http://www.myapp.com

设置完之后，当前的源http://www.myapp.com获得了访问数据的权限。这个时候我们可以在请求/响应头信息看到多了一些信息，大致如下：

GET /...
Host: ...
User-Agent: ...
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Referer: http://www.myapp.com/index.html
Origin: http://www.myapp.com

--------------------------
HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 00:23:53 GMT
Server: Apache/2.0.61
Access-Control-Allow-Origin: http://www.myapp.com
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml

2.使用JSONP解决跨域
除了使用设置CORS头信息，我们还可以使用JSONP来实现跨域调用。以Jquery为例，我们可以使用如下的写法来调用跨域资源：

function corsTest(){
$.ajax({
type: "get",
url: "http://other.host/data.json",
dataType:"jsonp",
jsonp:"callback",
jsonpCallback:"callBack",
......
})
}
function callBack(data){
// do something
......
}

 

同源的定义
给定两个页面，如果它们的协议、端口（如果指定了端口）、host都相同，则称之为同源。现在给出一个源连接和一些其他连接与这个源的比较，结合下表，我们来实际的理解一下这个概念。

http://store.company.com/dir/page.html:

URL 是否同源 原因
http://store.company.com/dir2/other.html 是
http://store.company.com/dir/inner/another.html 是
https://store.company.com/secure.html 否 协议不同
http://store.company.com:81/dir/etc.html 否 端口不同
http://news.company.com/dir/other.html 否 host不同