跨域资源共享(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();
xhr.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请求,那么它将用下面的头部作出响应:
如果一个credentialed请求被发送,这个头部不会作为响应地一部分被发送。浏览器不会将响应传递给JavaScript(responseText是一个空字符串,状态为0,onerror()被调用)。注意,服务器也能发送这个HTTP头部作为preflight响应的一部分,以此来表明该源允许发送credentialed请求。
Access-Control-Allow-Credentials: true
IE8不支持withCredentials属性,Firefox 3.5+, Safari 4+和Chrome都支持它。
结论
在 现代web浏览器中对跨域AJAX调用有许多可靠地支持,然而,大多数开发者仍没意识这些强大的功能力。只需在JavaScript和服务器端做一点额外 的工作以保证正确的头部被发送即可使用它。在允许高级请求和credentialed请求方面,IE8的执行有些滞后,但希望它对CORS的支持将会继续 改进。如果你想了解更多,我强烈建议你检查Arun Ranganathan的示例页。
跨域资源共享(CORS)--跨域ajax的更多相关文章
- 网络编程-跨域资源共享 CORS
目录 1.什么是同源策略? 2.跨域资源共享 CORS 3.预检请求 4.CORS相关字段 5.Golang实现跨域 6.参考资料 1.什么是同源策略? 如果两个 URL 的 protocol.por ...
- 跨域资源共享CORS与JSONP
同源策略限制: 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果没有同源策略,攻击者可以通过JavaScript获取你的邮件以及其他敏感信息,比如说 ...
- 跨域解决方案 - 跨域资源共享cors
目录 1. cors 介绍 2. 原理 3. cors 解决跨域 4. 自定义HTTP 头部字段解决跨域 5. 代码演示 5. 参考链接 1. cors 介绍 cors 说的是一个机制,其实相当于一个 ...
- VUE SpringCloud 跨域资源共享 CORS 详解
VUE SpringCloud 跨域资源共享 CORS 详解 作者: 张艳涛 日期: 2020年7月28日 本篇文章主要参考:阮一峰的网络日志 » 首页 » 档案 --跨域资源共享 CORS 详解 ...
- 跨域资源共享(CORS)问题解决方案
CORS:Cross-Origin Resource Sharing(跨域资源共享) CORS被浏览器支持的版本情况如下:Chrome 3+.IE 8+.Firefox 3.5+.Opera 12+. ...
- AJAX跨域资源共享 CORS 详解
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从 ...
- 跨域资源共享 CORS
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从 ...
- 跨域资源共享 CORS 详解
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从 ...
- 使Web Api 支持跨域资源共享(CORS)
Reference:http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api Imp ...
- 跨域资源共享CORS详解
简介 CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttpRequest请 ...
随机推荐
- Linux网络编程--sendfile零拷贝高效率发送文件
from http://blog.csdn.net/hnlyyk/article/details/50856268 Linux系统使用man sendfile,查看sendfile原型如下: #inc ...
- 智能指针scoped_ptr
对应C++11中的unique_ptr #include <iostream> #include <memory> class foo { public: foo() { st ...
- iOS 使用宏 常量 报错 expected expression
报错的代码: 报错原因:多写了一个分号!
- 解决Oracle EM 乱码问题
原创 作者:fa042 时间:2012-11-17 16:50:34 199 0 Oracle 10g提供了一个基于Web的管理工具EM(Enterprise Manager),使用比较方便.不过,如 ...
- SharePoint Online 创建资产库
前言 本文介绍如何在Office 365中创建资产库库,以及资产库的一些基本设置. 正文 通过登录地址登录到Office 365的SharePoint Online站点中,我们可以在右上角的设置菜单中 ...
- XVFB实现selenium在linux上无界面运行安装篇
selenium在linux上无界面运行,其实是非常简单的.具体的方法有使用HtmlUnitDriver或者PhantomJSDriver,有时间我会写写关于这两个东东的文章,其实基本和ChromeD ...
- JQuery攻略(五)表单验证
表单验证,字段空白,输入合法,数据合法....... 此章节有 1.1字段验证 1.2正则表达式验证 1.3复选框的勾选 1.1字段验证 1.字段非空 $(document).ready(functi ...
- 设置Images.xcassets后启动仍旧黑屏的问题
换了XCode6之后,发现以前写Icon-76.png这样很麻烦,就使用了Image.xcassets,公司所有测试机跑了一下,发现没什么问题.唯独有一台设置有问题,iphone5 ios6.0系统, ...
- 操作Wifi的工具类
有时候需要打开关闭wifi,或者是坚持状态什么的,这里我写了个工具类来完成各种操作,今后还会添加其他的功能.比如链接某个加密/不加密的wifi WifiAdmin.java package com.e ...
- Eclipse启动时提示Fail to create the Java Virtual Machine的解决方法
这个错误是Eclipse里面的一个bug,我们通过如下的设置就可以解决它. 打开eclipse安装目录下的eclipse.ini文件: 将其中的256m改为128m,512m改为256m,1024m改 ...