当前位置:首页 > PHP教程 > php面向对象 > 列表

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

发布:smiling 来源: PHP粉丝网  添加日期:2018-10-26 11:03:54 浏览: 评论:0 

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

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

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

  1. var url = "http://www.phpfensi.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(); 

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

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

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

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

设置CORS实现跨域请求

一、使用php代码实现

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

二、使用nginx配置实现

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

Tags: CORS POST

分享到: