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

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

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

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

var url = "http://www.Cuoxin.com/1.php"; 

if (XMLHttpRequest) {  

    var req = new XMLHttpRequest(); 

    // 利用withCredentials属性来判断是否支持跨域请求 

    if (!("withCredentials" in req)) { // w3c先行 

        if (window.XDomainRequest) { 

            req = new XDomainRequest(); 

        } 

    } 

    req.open('POST', url, true); 

    req.onload = function (data) { 

        alert(this.responseText); 

    }; 

    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代码实现

# 

# CORS config for php 

# Code by anrip[mail@anrip.com] 

# 

function make_cors($origin = '*') { 

    $request_method = $_SERVER['REQUEST_METHOD']; 

    if ($request_method === 'OPTIONS') { 

        header('Access-Control-Allow-Origin:'.$origin); 

        header('Access-Control-Allow-Credentials:true'); 

        header('Access-Control-Allow-Methods:GET, POST, OPTIONS'); 

        header('Access-Control-Max-Age:1728000'); 

        header('Content-Type:text/plain charset=UTF-8'); 

        header('Content-Length: 0',true); 

        header('status: 204'); 

        header('HTTP/1.0 204 No Content'); 

    } 

    if ($request_method === 'POST') { 

        header('Access-Control-Allow-Origin:'.$origin); 

        header('Access-Control-Allow-Credentials:true'); 

        header('Access-Control-Allow-Methods:GET, POST, OPTIONS'); 

    } 

    if ($request_method === 'GET') { 

        header('Access-Control-Allow-Origin:'.$origin); 

        header('Access-Control-Allow-Credentials:true'); 

        header('Access-Control-Allow-Methods:GET, POST, OPTIONS'); 

    } 

} 

二、使用nginx配置实现

# CORS config for nginx 

# Code by anrip[mail@anrip.com] 

# 

location / { 

    if ($request_method = 'OPTIONS') { 

        add_header 'Access-Control-Allow-Origin' $origin; 

        # 

        # Om nom nom cookies 

        # 

        add_header 'Access-Control-Allow-Credentials' 'true'; 

        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; 

        # 

        # Custom headers and headers various browsers *should* be OK with but aren't 

        # 

        add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; 

        # 

        # Tell client that this pre-flight info is valid for 20 days 

        # 

        add_header 'Access-Control-Max-Age' 1728000; 

        add_header 'Content-Type' 'text/plain charset=UTF-8'; 

        add_header 'Content-Length' 0; 

        return 204; 

     } 

    if ($request_method = 'POST') { 

        add_header 'Access-Control-Allow-Origin' $origin; 

        add_header 'Access-Control-Allow-Credentials' 'true'; 

        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; 

        add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; 

    } 

    if ($request_method = 'GET') { 

        add_header 'Access-Control-Allow-Origin' $origin; 

        add_header 'Access-Control-Allow-Credentials' 'true'; 

        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; 

        add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; 

    } 

} 

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!