1981人阅读
CORS跨域资源共享
跨域资源共享（CORS&）是一种网络浏览器的技术规范，它为Web服务器定义了一种方式，允许网页从不同的域访问其资源。
Form responseHeaders = (Form) getResponse().getAttributes().get(&org.restlet.http.headers&);&
& & if (responseHeaders == null) {&
& & & & responseHeaders = new Form();&
& & & & getResponse().getAttributes().put(&org.restlet.http.headers&, responseHeaders);&
& & responseHeaders.add(&Access-Control-Allow-Origin&, &*&);&
& & responseHeaders.add(&Access-Control-Allow-Methods&, &POST,OPTIONS&);
& & responseHeaders.add(&Access-Control-Allow-Headers&, &Content-Type&);&
& & responseHeaders.add(&Access-Control-Allow-Credentials&, &false&);&
& & responseHeaders.add(&Access-Control-Max-Age&, &60&);
红色是关键
在chrome &firefox 等浏览器可以，但是IE8不支持。
版权声明：本文为博主原创文章，未经博主允许不得转载。
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：111210次
积分：1941
积分：1941
排名：第11067名
原创：81篇
转载：72篇
(2)(3)(2)(1)(2)(3)(1)(6)(4)(4)(2)(1)(10)(3)(3)(1)(1)(4)(4)(9)(4)(1)(6)(2)(1)(3)(1)(1)(7)(5)(5)(1)(1)(1)(12)(2)(1)(1)(1)(3)(2)(4)(7)(16)之前有客户问我，如何AJAX跨域post，这个问题挺有意思，在我们看来，我是不被允许的，因为它是不安全的，但随着web api的火热，这个东西也被人们一步步的接受了，确实，有时，我们的接口希望对所有人公开，它并不在乎有人恶意去ＰＯＳＴ灌数据，呵呵！
实现思路：向HTTP请求头添加跨域标识Access-Control-Allow-Origin，将它的值设为*即可，当然如果你一个个页面去加那就太麻烦了，也不推荐，有一天老总感觉这是不安全的了，让你去掉它，只你可就麻烦大了，哈哈，所以，还有找个全局点吧！
开放的CORS过滤器，只对类开放，不支持方法单独设置
/// &summary&
/// 开放cors协议，支持跨域访问
/// &/summary&
[AttributeUsage(AttributeTargets.Class, Inherited = true, AllowMultiple = false)]
public class OpenCorsAttribute : ActionFilterAttribute
/// &summary&
/// 开放cors协议，支持跨域访问的初始化
/// &/summary&
public OpenCorsAttribute()
/// &summary&
///在action渲染之前
/// &/summary&
/// &param name="filterContext"&&/param&
public override void OnActionExecuting(ActionExecutingContext filterContext)
var responseHead = filterContext.RequestContext.HttpContext.Response.H
if (responseHead != null)
responseHead.Add("Access-Control-Allow-Origin", "*");
base.OnActionExecuting(filterContext);
使用它也非常简单
[OpenCorsAttribute]
public class HomeController : AsyncController
而如果希望所有控制器都添加这个特性，可以在FilterConfig类中去添加全局过滤器
public static void RegisterGlobalFilters(GlobalFilterCollection filters)
filters.Add(new OpenCorsAttribute());
filters.Add(new GlobalErrorAttribute());
filters.Add(new HandleErrorAttribute());
filters.Add(new UrlRuleFilterAttribute());
这样，你所有的Action也被破加上了这个特性，当然，如果你手动向Action上这是不被允许的，因为我们设置了AttributeUsage(AttributeTargets.Class)，呵呵
阅读(...) 评论()11352人阅读
一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题。解决方法有JSONP，Flash等等。
我们发现，Web页面上调用js文件时不受是否跨域的影响，凡是拥有&src&这个属性的标签都拥有跨域的能力，比如&script&、&img&、&iframe&。那就是说如果要跨域访问数据，就服务端只能把数据放在js格式的文件里。恰巧我们知道JSON可以简洁的描述复杂数据，而且JSON还被js原生支持，所以在客户端几乎可以随心所欲的处理这种格式的数据。然后客户端就可以通过与调用脚本一模一样的方式，来调用跨域服务器上动态生成的js格式文件。客户端在对JSON文件调用成功之后，也就获得了自己所需的数据。这就形成了JSONP的基本概念。允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
jQuery支持JSONP的调用。在另外的一个域名中指定好回调函数名称，就可以用下面的形式来就加载JSON数据。
url?callback=?
jQuery.getJSON(url + &&callback=?&, function(data) &{ &
& alert(data.a + data.b); &
服务端当然也要提供JSONP的支持，其实只要提供读写callback这个params就可以了。
跨域资源共享（CORS）
Cross-Origin Resource Sharing (CORS) 是W3c工作草案，它定义了在跨域访问资源时浏览器和服务器之间如何通信。CORS背后的基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方，从而决定请求或响应成功与否。
CORS与JSONP相比，更为先进、方便和可靠。
1、 JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。
2、 使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。
3、 JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS。
对一个简单的请求，没有自定义头部，要么使用GET，要么使用POST，它的主体是text/plain,请求用一个名叫Orgin的额外的头部发送。Origin头部包含请求页面的头部（协议，域名，端口），这样服务器可以很容易的决定它是否应该提供响应。
服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。
Header set Access-Control-Allow-Origin *&
为了防止XSS攻击我们的服务器， 我们可以限制域，比如
Access-Control-Allow-Origin: http://blog.csdn.net
很多服务都已经提供了CORS支持，比如 AWS 支持跨域资源分享功能CORS，向S3上传不需要代理。
版权声明：本文为博主原创文章，未经博主允许不得转载。
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：145151次
积分：1985
积分：1985
排名：第10764名
原创：43篇
转载：30篇
评论：16条
(1)(4)(1)(1)(3)(5)(11)(5)(10)(5)(1)(1)(4)(8)(5)(14)(1)1457人阅读
很简单,记下来方便找:
&pre name=&code& class=&javascript&&.config(['$routeProvider', '$httpProvider', function ($routeProvider, $httpProvider) {
// /questions//angularjs-post-data-to-external-rest-api
$httpProvider.defaults.useXDomain =
delete $httpProvider.mon['X-Requested-With'];
// Use x-www-form-urlencoded Content-Type
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
$httpProvider.defaults.headers.put['Content-Type'] = 'application/x-www-form-urlencoded';
// Override $http service's default transformRequest
$httpProvider.defaults.transformRequest = [function(data)
* T converts an object to x-www-form-urlencoded serialization.
* @param {Object} obj
* @return {String}
var param = function(obj)
var query = '';
var name, value, fullSubName, subName, subValue, innerObj,
for(name in obj)
value = obj[name];
if(value instanceof Array)
for(i=0; i&value. ++i)
subValue = value[i];
fullSubName = name + '[' + i + ']';
innerObj = {};
innerObj[fullSubName] = subV
query += param(innerObj) + '&';
else if(value instanceof Object)
for(subName in value)
subValue = value[subName];
if(subValue != null){
// fullSubName = name + '[' + subName + ']';
fullSubName = name + '.' + subN
// fullSubName =
innerObj = {};
innerObj[fullSubName] = subV
query += param(innerObj) + '&';
else if(value !== undefined ) //&& value !== null
query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
return query.length ? query.substr(0, query.length - 1) :
return angular.isObject(data) && String(data) !== '[object File]' ? param(data) :
版权声明：本文为博主原创文章，未经博主允许不得转载。
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：72648次
积分：1073
积分：1073
排名：千里之外
原创：32篇
评论：25条
(1)(5)(3)(1)(4)(1)(1)(1)(2)(1)(1)(1)(1)(7)(2)(4)(1)(1)(1)您所在的位置： &
Angular通过CORS实现跨域方案
Angular通过CORS实现跨域方案
顽Shi的博客
通篇写完才发现有点挂羊头卖狗肉的感觉,与其说Angular的跨域方案,不如说CORS的使用以及Angular中设置才对.靠谱的前端必备...尤其是遇到不靠谱的后端时.
以前有一篇很老的文章网上转了很多,包括现在如果你百度&跨域&这个关键字,前几个推荐的都是&Javascript跨域总结与解决方案&.看了一下感觉手段有点陈旧了,有一些比如document.domain还有iframe的解决方案委实&丑陋&一些,感觉不再适用于现在一些项目中.
就拿iframe来说作为一个前端工程师,我极为讨厌iframe这种东西.它不光增加了性能上的高负荷,同时也不利于掌控。
在Angular应用中实现跨域的方式相对简单,基本上通过两种方式即可.一种是JSONP,另一种是通过CORS.前者是相对比较老的手法,后者我感觉更加给力一点,所以本文主要说一下Angular如何与CORS配合跨域.
能不使用JSONP就尽量不使用,这是着手于Angular跨域的一个原则吧.不管怎么说,script的标签嵌入感觉还是low了点.&&
Angular推崇的时前后端分离,所以跨域由哪一方实现成为一个问题.这个就不得不说前端技术上的局限性,即使是相对好用的JSONP对于非GET请求也是无能为力的,因为它本质上还是通过script去get一些资源.
JSONP这种只能GET的限制,在Angular推崇RESTful风格接口的API场景下,就完全制约了它的使用,总不能弃POST和PUT那些不管.并且JSONP的错误处理很弱,不尽人意.总之前端实现跨域都有各种各样的局限性,又比如像document.domain则只能用于主域相同,子域不同的情况.
所以总结而言,虽然前端有多种方式处理跨域,但是多而不精,缺点都比较明显.相对而言更好的方式是通过后端参与处理,这样做不仅适用性更强,同时前端只要发送正常的Ajax请求即可.这样的技术叫做CORS.
Cross-Origin Resource Sharing跨域资源共享,应该算是现在最为推荐的跨域处理方案.不仅适用于各种Method,而且更加方便和简单.当然了,这么吊的东西只有现代浏览器支持,IE8一下的老古董就不要想了.
CORS实现原理
虽然通过CORS实现跨域基本上完全由后端实现,不过身为一个给力的前端.还是要掌握一下这一原理,以便当你遇到不靠谱的后端时,不至于...你懂得
CORS的本质让服务器通过新增响应头Access-Control-Allow-Origin,通过HTTP方式来实现资源共享,让每个请求的服务直接返回资源.它使用了HTTP交互方式来确定请求源是否有资格请求该资源,并且通过设置HTTP Header来控制访问资源的权限.
具体的过程是这样的前端发送一个正常的请求:
$http.get('/api/data',{params:{ &&&name:&'顽Shi'&}})&
后端设置一下response的header:
Access-Control-Allow-Origin:&&*&&Access-Control-Allow-Methods:&&GET&&Access-Control-Max-Age:&&60&&&&
然后你观察一下浏览器的行为会发现有趣的事,浏览器在没有你干预的情况下,发现这是一个跨域请求.所以它没有直接发送GET请求,而是发送了一个OPTIONS请求询问是否可以跨域访问该资源,这个过程我们可以称之为&预检&.
然后我们看到OPTIONS的response返回了类似下面的信息:
HTTP/1.1&200&OK &&&Date:&Mon,&01&Dec&:39&GMT &Server:&Apache/2.0.61&(Unix) &Access-Control-Allow-Origin:&* &Access-Control-Allow-Methods:&GET &Access-Control-Max-Age:&60 &Content-Encoding:&gzip &Content-Length:&0 &Connection:&Keep-Alive &Content-Type:&text/text &
这里的这几个Access头的内容就是服务器后端加上去的,它告诉了浏览器此后的60秒内,所有域都可以通过GET方法进行跨域访问该资源.然后浏览器自动再次发送了真正的GET请求,并返回对应的结果.
注意这一过程是浏览器自动实现的,这一点是不是非常棒.一些header信息的设置如下:
Access-Control-Allow-Origin:&&origin&&|&*&&Access-Control-Max-Age:&&delta-seconds&&&Access-Control-Allow-Credentials:&true&|&false&&Access-Control-Allow-Methods:&&method&[,&&method&]*&&Access-Control-Allow-Headers:&&field-name&[,&&field-name&]*&&
这里还有一处需要前端工程师协作的地方就是cookie的传递,默认情况下通过CORS这样的方式是不会传递cookie.一般强制性将cookie添加到header的做法,也会被浏览器拒绝并报错.上面看到了在服务器端会通过添加一个response头,Access-Control-Allow-Credentials来控制是否允许Cookie的提交.
在Angular中我们需要进行一些设置达到目的:
$http.post(url,&{withCredentials:&true,&...}) &&$http({withCredentials:&true,&...}).post(...) &&.config(function&($httpProvider)&{ &&&$httpProvider.defaults.withCredentials&=&true; &}&
如果是jQuery则要设置如下:
$.ajax(&/api/data&,&{ &&&type:&&GET&, &&&xhrFields:&{ &&&&&withCredentials:&true&&&}, &&&crossDomain:&true, &&&success:&function(data,&status,&xhr)&{ &&&} &});&
CORS的过程描述完毕,在网上找到一张图片:
CORS的分类
如果仔细观察浏览器的行为会发现,并不是所有的跨域请求都会发送OPTIONS请求.是不是有些奇怪,这就涉及到CORS的分类,简单请求和复杂请求.
HTTP的header通常包含下面这些内容:
Accept &Accept-Language &Content-Language &Last-Event-ID &Content-Type的值仅是下列之一: &&&&&&&&&&&&&&&&&&&&&&application/x-www-form-urlencoded &&&&&&&&&&&&&&&&&&&&&&multipart/form-data &&&&&&&&&&&&&&&&&&&&&&text/plain&
HTTP方法是HEAD,GET,POST之一,同时HTTP的header包含如上面所示.任何一个不满足这两种要求的请求,都是复杂请求.比如发送PUT,DELETE等HTTP动作,或者Content-Type: application/json的内容.
只有复杂请求包含&预检&这一动作,另外Access-Control-Max-Age应该也会影响OPTIONS请求的发送.
原文链接：【编辑推荐】【责任编辑： TEL：（010）】
关于&&的更多文章
Angular.js 是一个MV*（Model-View-Whatever，不管是MVC或者MVVM
再过一次生日，我就满七十岁了。而且正如大家印象中一样，像我这个年纪的...
讲师： 46人学习过讲师： 96人学习过讲师： 17人学习过
IE浏览器不支持很多CSS属性是出了名的，即便在支持的
又是一周匆匆而过。上周五、周六两天，2013年51CTO云
十一归来，貌似大家都没有什么劲头。本周五，为期两天
在软件领域，很少能有像《人月神话》一样具有深远影响力并且畅销不衰的著作。Brooks博士为人们管理复杂项目提供了最具洞察力的见
51CTO旗下网站