操作跨域资源共享(CORS)实现ajax跨域挪用

几年前，网站开拓者都由于ajax的同源计策而撞了南墙。当我们赞叹于XMLHttpRequest工具跨赏识器支持所带来的庞大前进时，我们很快发明没有一个要领可以使我们用JavaScript实现哀求跨域会见，对此我们哀叹不已。每小我私人在他们本身的网站上成立署理（which was the onset of a new host of open redirect problems）来挣脱这种限定。固然开拓者操作处事器署理和其余能力避开了这种限定，而在社区的抗议者应承ajax在当地跨域挪用。很多人还没意识到当前险些全部的赏识器（Internet Explorer 8+， Firefox 3.5+， Safari 4+和 Chrome）都可通过名为Cross-Origin Resource Sharing的协议支持ajax跨域挪用。

跨域资源共享（CORS）

Cross-Origin Resource Sharing (CORS)是W3c事变草案，它界说了在跨域会见资源时赏识器和处事器之间怎样通讯。CORS背后的根基头脑是行使自界说的HTTP头部应承赏识器和处事器彼此相识对方，从而抉择哀求或相应乐成与否。

对一个简朴的哀求，没有自界说头部，要么行使GET，要么行使POST，它的主体是text/plain,哀求用一个名叫Orgin的特另外头部发送。Origin头部包括哀求页面的头部（协议，域名，端口），这样处事器可以很轻易的抉择它是否应该提供相应。

Origin: http://www.nczonline.net/

假如处事器确定哀求被通过，它将发送一个Access-Control-Allow-Origin头部相应发送哀求的统一个源，假如是一个民众资源，则返回“*”。如：

Access-Control-Allow-Origin: http://www.nczonline.net/

假如头部丢失，可能源不匹配，那么赏识器将拒绝哀求。假如统统顺遂，赏识器将处理赏罚哀求。留意，哀求和相应都不包罗cookie信息。

先条件到的全部赏识器都支持这些简朴的哀求。FF3.5 +，Safari 4和chrome通过行使XMLHttpRequest工具支持其行使。当实行在差异域打开一个资源时，不需任何代码，这个举动会自动触发。如：

var xhr = new XMLHttpRequest();
xhr.open("get", "http://www.nczonline.net/some_resource/", true);
xhr.onload = function(){  //instead of onreadystatechange
    //do something
};
xhr.send(null);

在IE8中也是一样，用同样的方法你必要行使XDomainRequest object。

var xdr = new XDomainRequest();
xdr.open("get", "http://www.nczonline.net/some_resource/");
xdr.onload = function(){
    //do something
};
xdr.send();

Mozilla小组在他们关于CORS的留言中提议应该搜查withCredentials属性的存在性，从而抉择赏识器是否通过XHR支持CORS。你可以归并XDomainRequest 工具的存在性来支持全部的赏识器：

function createCORSRequest(method, url){
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr){
        xhr.open(method, url, true);
    } else if (typeof XDomainRequest != "undefined"){
        xhr = new XDomainRequest();
        xdr.open(method, url);
    } else {
        xhr = null;
    }
    return xhr;
}
var request = createCORSRequest("get", "http://www.nczonline.net/");
if (request){
    request.onload = function(){
        //do something with request.responseText
    };
    request.send();
}

Firefox, Safari, 和Chrome的XMLHttpRequest工具与IE的XDomainRequest工具有着相似的充实的接口，这些模式运行的很好。常见的接口属性/要领:

• abort()——用来终止已在历程中哀求。
• Onerror（）——更换onreadystatechange要领来探测错误。
• Onload（）——更换onreadystatechange要领来探测乐成。
• responseText——用来取得相应地文本。
• send()——用来发送哀求。

Preflighted哀求

除了GET或POST，通过一种称之为preflighted哀求的处事器透明验证机制，CORS应承行使自界说的头部和要领，以及差异主体内容范例。当你实行行使高级选项中的一个来试着成立一个哀求时，这时就成立了一个preflighted哀求。该哀求行使可选的要领，并发送如下头部：

• Origin——与简朴哀求沟通。
• Access-Control-Request-Method——哀求将要行使的要领。
• Access-Control-Request-Headers——（可选）一个逗号分隔的正被行使的自界说头部列表。

例子假定一个头部自界说为NCZ的POST哀求：

Origin: http://www.nczonline.net/
Access-Control-Request-Method: POST
Access-Control-Request-Headers: NCZ

在哀求时代，处事器能抉择是否应承这类哀求。处事器通过在相应中发送以下头部来与赏识器通讯。

• Access-Control-Allow-Origin——与简朴哀求沟通。
• Access-Control-Allow-Methods——用逗号分隔的可接管的要领列表。
• Access-Control-Allow-Headers——用逗号分隔的处事器可接管的头部列表。
• Access-Control-Max-Age——preflighted 哀求应该被缓存的时刻。

如：

Access-Control-Allow-Origin: http://www.nczonline.net
Access-Control-Allow-Methods: POST, GET
Access-Control-Allow-Headers: NCZ
Access-Control-Max-Age: 1728000

preflighted 哀求一旦作出，功效将按相应中划定的时刻缓存下来；第一次做出这样的哀求，你将激发一次特另外HTTP哀求。

Firefox 3.5+, Safari 4+和Chrome都支持preflighted 哀求，IE8则不支持。

Credentialed哀求

默认状态下，跨域哀求不提供证书（cookie、HTTP身份验证、客户端SSL证书）。你可以划定一个哀求应该通过配置withCredentials属性为true来发送证书。假如处事器应承credentialed哀求，那么它将用下面的头部作出相应：

Access-Control-Allow-Credentials: true

（编辑：河北网）

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