文档章节

Angular通过CORS实现跨域方案

顽Shi
 顽Shi
发布于 2014/08/18 14:00
字数 1535
阅读 32462
收藏 128

    以前有一篇很老的文章网上转了很多,包括现在如果你百度"跨域"这个关键字,前几个推荐的都是"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('www.cros.com/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 2013 01:15: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 // 控制是否开启与Ajax的Cookie提交方式

Access-Control-Allow-Methods: <method>[, <method>]* // 允许请求的HTTP Method

Access-Control-Allow-Headers: <field-name>[, <field-name>]* // 控制哪些header能发送真正的请求    

    这里还有一处需要前端工程师协作的地方就是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("www.cros.com/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请求的发送.

© 著作权归作者所有

顽Shi
粉丝 275
博文 81
码字总数 92387
作品 0
普陀
程序员
私信 提问
加载中

评论(16)

l
lliyueling
是不是有些浏览器做不到自动预检?不能支持
90arther
90arther

引用来自“copperpeas”的评论

没怎么详细看,怎么不NGINX做反向代理,一句配置就搞定的事情,何必这么麻烦。
前端在自己的开发机NGINX上做个代理就OK,前端后端开发给平时一样,跨越交给NGINX,两不误,效率高。
你错了,这做法只是把传统的后端转发URL流量的工作提到nginx层而已,这里讨论的是怎样解决跨域的问题。
顽Shi
顽Shi 博主

引用来自“huiyong-cheng”的评论

为什么,不能发送header信息? 后端一直获取不到
通过CORS跨域,请求是正常发送的
huiyong-cheng
huiyong-cheng
为什么,不能发送header信息? 后端一直获取不到
pong
pong
MingjunYang
MingjunYang

引用来自“copperpeas”的评论

没怎么详细看,怎么不NGINX做反向代理,一句配置就搞定的事情,何必这么麻烦。
前端在自己的开发机NGINX上做个代理就OK,前端后端开发给平时一样,跨越交给NGINX,两不误,效率高。

引用来自“xiongxin8802”的评论

怎么一句话配置,求指教
location /api/ { proxy_pass http://xxxx.xx:xxx; }
Raphael_goh
Raphael_goh

引用来自“copperpeas”的评论

没怎么详细看,怎么不NGINX做反向代理,一句配置就搞定的事情,何必这么麻烦。
前端在自己的开发机NGINX上做个代理就OK,前端后端开发给平时一样,跨越交给NGINX,两不误,效率高。
没啥关系吧,CORS是Html5标准,它至少提供了一种原生的解决方法。 而代理是传统的第三方方案,虽然的确也很不错,但毕竟不是原生方法。 不过有些人觉得官方的没第三方的好用的也大有人在,自己觉得怎么方便怎么用就好了。
limichange
limichange
http://www.html-js.com/article/Nodejs-scrap-with-nodejs-to-build-a-local-reverse-proxy-environment
楼上的看这个
顽Shi
顽Shi 博主

引用来自“copperpeas”的评论

没怎么详细看,怎么不NGINX做反向代理,一句配置就搞定的事情,何必这么麻烦。
前端在自己的开发机NGINX上做个代理就OK,前端后端开发给平时一样,跨越交给NGINX,两不误,效率高。
没往这个方向合计,查查看
开源中国的 AngularJS 优秀文章汇总

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

oschina
2014/08/24
5.7K
13
Angular 应用解决跨域访问的问题

在前后台分离的应用中,Angular 与 Java 是一对好搭档。但是如果是分开部署应用,则势必会遇到跨域访问的问题。 什么是跨域 启动应用之后,有些浏览器会提示如下告警信息: 这个是典型的跨域...

waylau
2018/12/21
0
0
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.1K
26
AngularJS跨域问题 ajax 跨域

先看代码: 一:案例实现 从网上下载了一个AngularJS项目,配置启动后发现数据发送不到自己的后台中去,总是提示跨域问题。 下面是AngularJS的部分代码: <!DOCTYPE html PUBLIC "-//W3C//D...

simpower
2017/12/13
0
0
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Mac部分目录读写提示“Operation not permitted”解决

今天试图在mac os x下重命名/usr/bin/python,提示Operation not permitted,虽然我是root,很奇怪。原来mac os x里还有一个安全机制:rootless,少用root。参考这篇文章如何开关rootless,不...

swingcoder
25分钟前
1
0
49.Nginx防盗链 访问控制 解析php相关 代理服务器

12.13 Nginx防盗链 12.14 Nginx访问控制 12.15 Nginx解析php相关配置(502的问题) 12.16 Nginx代理 扩展 502问题汇总 http://ask.apelearn.com/question/9109 location优先级 http://blog....

oschina130111
30分钟前
0
0
信必优成功案例 – 中国网络电视台(CNTV)

项目背景 •中国网络电视台(英文简称CNTV),由央视国际网络有限公司主办,是中央电视台旗下的国家网络广播电视播出机构。中国网络电视台全面部署多终端业务架构,已建设网络电视、IP电视、...

symbiochina88
31分钟前
0
0
redis cluster集群 三主三从

redis 集群一般由 多个节点 组成,节点数量至少为 6 个,才能保证组成 完整高可用 的集群。每个节点需要 开启配置 cluster-enabled yes,让 redis 运行在 集群模式 下。 redis5之后使用redis...

MonroeCode
32分钟前
1
0
新东方的Kubernetes实践:从服务化ES到Kafka和Redis

2017年,新东方开始了利用容器化手段将中间件业务服务化的探索,基于Rancher 1.6使用ES;2019年,新东方再次开始了扩大了中间件的业务服务化,基于Kubernetes使用Kafka、ES和Redis。在服务化...

RancherLabs
34分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部