AJAX POST&跨域 解决方案 - CORS

标签: ajax post cors | 发表时间:2015-05-29 15:46 | 作者:hongtoushizi
出处:http://www.iteye.com
跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容),因为我们在日常的项目开发时会不可避免的需要进行跨域操作,所以跨域能力也算是前端工程师的基本功之一。
  和大多数跨域的解决方案一样,JSONP也是我的选择,可是某天PM的需求变了,某功能需要改成支持POST,因为传输的数据量比较大,GET形式搞不定。所以折腾了下闻名已久的 CORS(跨域资源共享,Cross-Origin Resource Sharing ,这边文章也就是折腾期间的小记与总结。
     
     

 

概述

  • CORS能做什么:
     正常使用AJAX会需要正常考虑跨域问题,所以伟大的程序员们又折腾出了一系列跨域问题的解决方案,如JSONP、flash、ifame、xhr2等等。
     本文介绍的CORS就是一套AJAX跨域问题的解决方案。
 
  •  CORS的原理:
     CORS定义一种跨域访问的机制,可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单,只需由服务器发送一个响应标头即可。
 
  • CORS浏览器支持情况如下图:
       
     
  喜闻乐见、普大喜奔的支持情况,尤其是在 移动终端上,除了opera Mini;
  PC上的现代浏览器都能友好的支持,除了IE9-,不过前端工程师对这种情况早应该习惯了...
     
 

CORS启航

 
  假设我们页面或者应用已在 http://www.test1.com 上了,而我们打算从 http://www.test2.com 请求提取数据。一般情况下,如果我们直接使用 AJAX 来请求将会失败,浏览器也会返回“源不匹配”的错误," 跨域"也就以此由来。
  利用 CORS,http://www.test2.com 只需添加一个标头,就可以允许来自 http://www.test1.com 的请求,下图是我在PHP中的 hander() 设置, “*”号表示允许任何域向我们的服务端提交请求
     

   也可以设置指定的域名,如域名 http://www.test2.com ,那么就允许来自这个域名的请求

     
     
  当前我设置的header为“*”,任意一个请求过来之后服务端我们都可以进行处理&响应,那么在调试工具中可以看到其头信息设置,其中见红框中有一项信息是“ Access-Control-Allow-Origin:* ”,表示我们已经启用CORS,如下图。
  PS:由于demo都在我厂的两台测试机间完成,外网也不能访问,所以在这就不提供demo了,见谅
     
   简单的一个header设置,一个支持跨域&POST请求的server就完成了:)
 
  当然,如果没有开启CORS必定失败的啦,如下图:
  

问题&小结

  • 刚刚说到的兼容性。CORS是W3C中一项较新的方案,所以部分浏览器还没有对其进行支持或者完美支持,详情可移至  http://www.w3.org/TR/cors/
  • 安全问题。CORS提供了一种跨域请求方案,但没有为安全访问提供足够的保障机制,如果你需要信息的绝对安全,不要依赖CORS当中的权限制度,应当使用更多其它的措施来保障,比如OAuth2。
 
  自认为的cors使用场景:
  • cors在移动终端支持的不错,可以考虑在移动端全面尝试;PC上有不兼容和没有完美支持,所以小心踩坑。当然浏览器兼容就是个伪命题,说不准某个浏览器的某个版本就完美兼容了,说不准就有点小坑,尼玛伤不起!~
  • jsonp是get形式,承载的信息量有限,所以信息量较大时CORS是不二选择;
  • 配合新的JSAPI(fileapi、xhr2等)一起使用,实现强大的新体验功能。
 
总结的不错,就拿过来了。
转载自: http://www.cnblogs.com/Darren_code/p/cors.html


已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [ajax post cors] 推荐:

AJAX POST&跨域 解决方案 - CORS

- - JavaScript - Web前端 - ITeye博客
跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容),因为我们在日常的项目开发时会不可避免的需要进行跨域操作,所以跨域能力也算是前端工程师的基本功之一.   和大多数跨域的解决方案一样,JSONP也是我的选择,可是某天PM的需求变了,某功能需要改成支持POST,因为传输的数据量比较大,GET形式搞不定.

jquery的$.ajax() $.post() $.getJSON() 等ajax方法时,中文参数乱码问题

- - CSDN博客推荐文章
在使用jquery的$.ajax()  $.post() $.getJSON() 等ajax方法时,难免会有用到中文参数的问题,在后台接收的中文参数是乱码,解决方法如下:.     dataType : ‘json’     ,type : ‘POST’     ,url : ‘http://localhost/test/test.do’     ,data : {id: 1, type: ‘商品’}     ,success : function(data){             } } );.

菜鸟简述Jquery中Ajax发送post请求及XML响应

- - 博客园_首页
在没有出现jquery前,是通过纯手工的方式获取XmlHttpRequest对象来向服务器发送异步请求实现局部刷新. 在jquery出现以后我们利用其封装好的对象来实现ajax请求,下面以post请求为例作一个简单介绍:. jQuery.post(url, [data], [callback], [type]),其中url为请求地址,data为待发送的参数及其值,callback为发送成功时的回调函数,type为返回内容的类型(xml、html、text、json等).

AJAX POST请求中参数以form data和request payload形式在servlet中的获取方式

- - 行业应用 - ITeye博客
HTTP请求中,如果是get请求,那么表单参数以name=value&name1=value1的形式附到url的后面,如果是post请求,那么表单参数是在请求体中,也是以name=value&name1=value1的形式在请求体中. 通过chrome的开发者工具可以看到如下(这里是可读的形式,不是真正的HTTP请求协议的请求格式):.

原生AJAX

- - Web前端 - ITeye博客
对象是ajax的基础,几乎所有的浏览器都支持他,只是创建方式不同,如IE5,IE6. 2、AJAX - 向服务器发送请求请求. 与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用. 然而,在以下情况中,请使用 POST 请求:. 无法使用缓存文件(更新服务器上的文件或数据库). 向服务器发送大量数据(POST 没有数据量限制).

初识Ajax

- - CSDN博客推荐文章
Ajax(Asynchronous JavaScript and XMLS异步JavaScript和XML)(“阿贾克斯”)技术. 完成页面的局部刷新,从而提升操作性能. AJAX 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术. 依赖的核心对象:XMLHttpRequest.

iframe post提交数据

- - Web前端 - ITeye博客
对于iframe默认get提交 需要进行post数据的大量提交,给找到外国网站的简单例子如:
. 因为我项目用到的是 页面用的tab 样式(如何实现tab样式切换这里不做说明),嵌入的是三个页面iframe,需要在切换的时候更改target指定iframe名字,为了验证是否可行,只好试下,不然无别的办法.

NGINX配置跨域CORS支持的正确方式 - SegmentFault 思否

- -
在做 H5 的时候难免会跨域请求后端 API,虽然用 HBuilder 内置的浏览器不会有跨域问题(这个应该是做了内部处理),但是那个内置浏览器真尼妈坑爹,过一会就会卡死,导致 HBuilder 无响应,杀进程也是无济于事,只能重启,重复几次谁受的了. 后来发现用外部的浏览器不会有这个问题,但是又面临跨域.

从HTTP GET和POST的区别说起

- jin - Yining.write()
在推特上抱怨面试时问HTTP GETE和POST的区别得到回答都不满意,有人不清楚,当时只回复了看 RFC2616. 面试时得到的回答大多是:POST是安全的,因为被提交的数据看不到,或者被加密的,其它的还有GET的时候中文出现乱码(在地址栏里),数据最大长度限制等等. 说 POST 比 GET 安全肯定是错的,POST跟GET都是明文传输,用httpfox等插件,或者像WireShark 等类似工具就能观察到.

nodejs-post文件上传原理详解

- never-online - CNode社区
浅谈HTTP中Get与Post的区别. 其中请求报文中的开始行和首部行包含了常见的各种信息,比如http协议版本,方法(GET/POST),accept-language,cookie等等. 而’实体主体’一般在post中使用,比如我们用表单上传文件,文件数据就是在这个’实体主体’当中. 写这篇教程的起因是因为在学习nodejs的过程中,想要自己实现一些文件上传的功能,于是不得不去研究POST.