利用CORS实现POST方式跨域请求数据

CORS全名Cross-Origin Resource Sharing，顾名思义：跨域分享资源，这是W3C制定的跨站资源分享标准。

目前包括IE10+、chrome、safari、FF都提供了XMLHttpRequest对象对该标准的支持，在更老的IE8中则提供了xDomainRequest对象，部分实现了该标准；

下面是创建request对象的代码：

1. var url = "http://www.Vevb.com/1.php"; 
2.  
3. if (XMLHttpRequest) {  
4.     var req = new XMLHttpRequest(); 
5.     // 利用withCredentials属性来判断是否支持跨域请求 
6.     if (!("withCredentials" in req)) { // w3c先行 
7.         if (window.XDomainRequest) { 
8.             req = new XDomainRequest(); 
9.         } 
10.     } 
11.     req.open('POST', url, true); 
12.     req.onload = function (data) { 
13.         alert(this.responseText); 
14.     }; 
15.     req.send(); 
16. } 

注意xDomainRequest对象只支持http和https协议

在利用XMLHttpRequest对象发POST请求前会发一个options嗅探来确定是否有跨域请求的权限；同时在header头上带上Origin信息来指示来源网站信息，服务器响应时需要带上Access-Control-Allow-Origin头的值是否和Origin信息相匹配。

header("Access-Control-Allow-Origin: http://localhost"); // *为全部域名

CORS的缺点是你必须能控制服务器端的权限，允许你跨域访问

设置CORS实现跨域请求

一、使用php代码实现

1. # 
2. # CORS config for php 
3. # Code by anrip[mail@anrip.com] 
4. # 
5.  
6. function make_cors($origin = '*') { 
7.  
8.     $request_method = $_SERVER['REQUEST_METHOD']; 
9.  
10.     if ($request_method === 'OPTIONS') { 
11.  
12.         header('Access-Control-Allow-Origin:'.$origin); 
13.         header('Access-Control-Allow-Credentials:true'); 
14.         header('Access-Control-Allow-Methods:GET, POST, OPTIONS'); 
15.  
16.         header('Access-Control-Max-Age:1728000'); 
17.         header('Content-Type:text/plain charset=UTF-8'); 
18.         header('Content-Length: 0',true); 
19.  
20.         header('status: 204'); 
21.         header('HTTP/1.0 204 No Content'); 
22.  
23.     } 
24.  
25.     if ($request_method === 'POST') { 
26.  
27.         header('Access-Control-Allow-Origin:'.$origin); 
28.         header('Access-Control-Allow-Credentials:true'); 
29.         header('Access-Control-Allow-Methods:GET, POST, OPTIONS'); 
30.  
31.     } 
32.  
33.     if ($request_method === 'GET') { 
34.  
35.         header('Access-Control-Allow-Origin:'.$origin); 
36.         header('Access-Control-Allow-Credentials:true'); 
37.         header('Access-Control-Allow-Methods:GET, POST, OPTIONS'); 
38.  
39.     } 
40.  
41. } 

二、使用nginx配置实现

1. # CORS config for nginx 
2. # Code by anrip[mail@anrip.com] 
3. # 
4.  
5. location / { 
6.  
7.     set $origin '*'; 
8.  
9.     if ($request_method = 'OPTIONS') { 
10.  
11.         add_header 'Access-Control-Allow-Origin' $origin; 
12.  
13.         # 
14.         # Om nom nom cookies 
15.         # 
16.         add_header 'Access-Control-Allow-Credentials' 'true'; 
17.         add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; 
18.  
19.         # 
20.         # Custom headers and headers various browsers *should* be OK with but aren't 
21.         # 
22.         add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; 
23.  
24.         # 
25.         # Tell client that this pre-flight info is valid for 20 days 
26.         # 
27.         add_header 'Access-Control-Max-Age' 1728000; 
28.         add_header 'Content-Type' 'text/plain charset=UTF-8'; 
29.         add_header 'Content-Length' 0; 
30.  
31.         return 204; 
32.  
33.     } 
34.  
35.     if ($request_method = 'POST') { 
36.  
37.         add_header 'Access-Control-Allow-Origin' $origin; 
38.         add_header 'Access-Control-Allow-Credentials' 'true'; 
39.         add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; 
40.         add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; 
41.  
42.     } 
43.  
44.     if ($request_method = 'GET') { 
45.  
46.         add_header 'Access-Control-Allow-Origin' $origin; 
47.         add_header 'Access-Control-Allow-Credentials' 'true'; 
48.         add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; 
49.         add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; 
50.  
51.     } 
52.  
53. }