- 浏览: 438870 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
ubuntu的疯狂:
推荐一份完整的教程:http://blog.ddlisting ...
Emberjs学习 -
ptz19:
请问,如果把合并前的文件,不要dest 目标目录来。如: js ...
gulp下静态资源的合并、压缩、MD5后缀 -
zhouzq1008:
楼主,还有个问题,<a href="" ...
gulp下静态资源的合并、压缩、MD5后缀 -
zhouzq1008:
感谢楼主,用到了您的代码, 但现在好像有改动 否则会报错:修改 ...
gulp下静态资源的合并、压缩、MD5后缀 -
denverj:
感谢分享~
Emberjs学习
CORS浏览器支持:Firefox 3.5+, Safari 4+, Chrome, Safari for iOS, and WebKit for Android
允许多个域名? 可以考虑把 域名做一个白名单,读取到服务器,然后再进行匹配。
上述的这种跨域请求有几个限制:
1. 不会携带cookie信息到服务器端;服务器端也不能写cookie到客户端;
2. 不能通过setRequestHeader()自定义头部信息;
3. getAllResponseHeaders()返回值为空字符串。
关于预检请求(Preflighted Request):
事实上,如果用户通过setRequestHeader自定义了头部信息,浏览器会默认先发送一个请求,用了判断请求是否合法,如果不通过,
ajax请求就失败了,如果通过了,浏览器会再发一次请求,读取服务器的返回数据。
例如,上述例子中,如果调用:
objXMLHTTP.setRequestHeader("hello","world");
则浏览器会发出请求,内容为空,请求头部为:
OPTIONS /jsp/json.jsp HTTP/1.1
Host: www.test.com:8080
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:8.0.1) Gecko/20100101 Firefox/8.0.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,* / * ;q=0.8
Accept-Language: zh-cn,zh;q=0.5
Accept-Encoding: gzip, deflate
Accept-Charset: GB2312,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Origin: http://shawn.test2.com
Access-Control-Request-Method: GET
Access-Control-Request-Headers: hello
注意,头部请求中,多出几个选项:
Origin: http://shawn.test2.com
Access-Control-Request-Method: GET
Access-Control-Request-Headers: hello
如果想采用POST方式提交ajax数据,需要手动设置
因为这里定义请求头,所以后端也需要做设置支持:
浏览器支持预检请求:Firefox 3.5+, Safari 4+, and Chrome
关于携带验证信息的请求(Credentialed Requests)
如果希望把cookie信息、HTTP授权信息、客户端的SSL证书等发送到服务器端。可以如下设置:
注意:
1. 这里面,请求携带的是 服务器所在域名的cookie。例子中,就是 www.test.com (包括test.com)的cookie信息。
2. 如果服务端这时候设置了cookie,那么它是起作用的,默认挂在 www.test.com 域名下。
IE8+ 下的跨域对象:
IE8+ 支持一个XDomainRequest (XDR) 对象,用来进行跨域的ajax通信。
XDomainRequest 相比较普通的Ajax对象,有以下限制:
1. 不支持Cookie的发送和接收;
2. 除了 Content-type,不能设置其他请求头部;
3. 无法读写返回头部;
4. 仅支持 GET / POST 方法。(其它的方法的是?)
总的来说,IE下出于安全的考虑,对于跨域的ajax限制很大,功能也弱。XDomainRequest也支持 progres、timeout等事件,更多内容可以参考MSDN.
参考资料:
https://developer.mozilla.org/en-US/docs/HTTP_access_control
http://msdn.microsoft.com/ZH-CN/library/cc288060
https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS?redirectlocale=en-US&redirectslug=HTTP_access_control
《javascript高级程序设计3》
//页面A: http://shawn.test2.com/crossAjax.html function create(){ var objXMLHTTP = new XMLHttpRequest(); objXMLHTTP.open('GET', 'http://www.test.com:8080/jsp/json.jsp', true); //objXMLHTTP.setRequestHeader("hello","world"); objXMLHTTP.onreadystatechange = function(){ if(objXMLHTTP.readyState == 4){ alert(objXMLHTTP.responseText); } }; objXMLHTTP.send(null); } //后端页面B: http://www.test.com:8080/jsp/json.jsp <% // 允许来自 http://shawn.test2.com(默认端口80)的请求。 response.setHeader("Access-Control-Allow-Origin","http://shawn.test2.com"); // 允许所有 //response.setHeader("Access-Control-Allow-Origin","*"); /* cookie 设置发送到浏览器端,不会生效。 String cookieName="Sender"; Cookie cookie=new Cookie(cookieName, "Test_Content"); cookie.setMaxAge(10); //存活期为10秒 response.addCookie(cookie); */ String str = ""; str += "{"; str += "\"result\":1"; str += ",\"data\":[5,7]"; str += "}"; out.print(str); %>
允许多个域名? 可以考虑把 域名做一个白名单,读取到服务器,然后再进行匹配。
上述的这种跨域请求有几个限制:
1. 不会携带cookie信息到服务器端;服务器端也不能写cookie到客户端;
2. 不能通过setRequestHeader()自定义头部信息;
3. getAllResponseHeaders()返回值为空字符串。
关于预检请求(Preflighted Request):
事实上,如果用户通过setRequestHeader自定义了头部信息,浏览器会默认先发送一个请求,用了判断请求是否合法,如果不通过,
ajax请求就失败了,如果通过了,浏览器会再发一次请求,读取服务器的返回数据。
例如,上述例子中,如果调用:
objXMLHTTP.setRequestHeader("hello","world");
则浏览器会发出请求,内容为空,请求头部为:
OPTIONS /jsp/json.jsp HTTP/1.1
Host: www.test.com:8080
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:8.0.1) Gecko/20100101 Firefox/8.0.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,* / * ;q=0.8
Accept-Language: zh-cn,zh;q=0.5
Accept-Encoding: gzip, deflate
Accept-Charset: GB2312,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Origin: http://shawn.test2.com
Access-Control-Request-Method: GET
Access-Control-Request-Headers: hello
注意,头部请求中,多出几个选项:
Origin: http://shawn.test2.com
Access-Control-Request-Method: GET
Access-Control-Request-Headers: hello
如果想采用POST方式提交ajax数据,需要手动设置
function create(){ var objXMLHTTP = new XMLHttpRequest(); objXMLHTTP.open('POST', 'http://www.test.com:8080/jsp/json.jsp', true); objXMLHTTP.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); objXMLHTTP.setRequestHeader("hello", "world"); objXMLHTTP.onreadystatechange = function(){ if(objXMLHTTP.readyState == 4){ alert(objXMLHTTP.responseText); } }; objXMLHTTP.send("userName=shawn"); }
因为这里定义请求头,所以后端也需要做设置支持:
<% response.setHeader("Access-Control-Allow-Origin","http://shawn.test2.com"); //response.setHeader("Access-Control-Allow-Methods","GET,POST"); //逗号分隔;默认可以不设置。 response.setHeader("Access-Control-Allow-Headers","Content-Type,hello"); //逗号分隔 //预检测被缓存时间:30秒;默认可以不设置。在这个时间内,用户再次请求改数据,可以跳过预检测阶段。 // 在firefoxV8里面,发现这个设置并没有生效。chromeV14、Safari5是生效的。 //response.setHeader("Access-Control-Max-Age","30"); String str = ""; str += "{"; str += "\"result\":1"; str += ",\"data\":[5,7]"; str += ",\"userName\":" + request.getParameter("userName"); str += "}"; out.print(str); %>
浏览器支持预检请求:Firefox 3.5+, Safari 4+, and Chrome
关于携带验证信息的请求(Credentialed Requests)
如果希望把cookie信息、HTTP授权信息、客户端的SSL证书等发送到服务器端。可以如下设置:
objXMLHTTP.withCredentials = true; //允许ajax请求携带cookie信息 // 服务器端,同样要做调整: response.setHeader("Access-Control-Allow-Credentials", "true");
注意:
1. 这里面,请求携带的是 服务器所在域名的cookie。例子中,就是 www.test.com (包括test.com)的cookie信息。
2. 如果服务端这时候设置了cookie,那么它是起作用的,默认挂在 www.test.com 域名下。
IE8+ 下的跨域对象:
IE8+ 支持一个XDomainRequest (XDR) 对象,用来进行跨域的ajax通信。
XDomainRequest 相比较普通的Ajax对象,有以下限制:
1. 不支持Cookie的发送和接收;
2. 除了 Content-type,不能设置其他请求头部;
3. 无法读写返回头部;
4. 仅支持 GET / POST 方法。(其它的方法的是?)
//http://shawn.test2.com/crossAjax.html function createXDR(){ var xdr = new XDomainRequest(); xdr.onload = function(){ alert(xdr.responseText); }; xdr.onerror = function(){ alert("An error occurred."); }; //测试中,发现仅仅只能通过GET方式传值。 xdr.open("GET", "http://www.test.com:8080/jsp/jsonie.jsp"); // IE8 下报错 // xdr.contentType = "application/x-www-form-urlencoded"; // xdr.send(); // 后端无法读取到POST的内容。不知道为何? // xdr.send("userName=shawn"); } // http://www.test.com:8080/jsp/jsonie.jsp <% response.setHeader("Access-Control-Allow-Origin","*"); // allow all String str = ""; str += "{"; str += "\"result\":1"; str += ",\"data\":[5,7]"; str += ",\"userName\":" + request.getParameter("userName"); str += "}"; out.print(str); %>
总的来说,IE下出于安全的考虑,对于跨域的ajax限制很大,功能也弱。XDomainRequest也支持 progres、timeout等事件,更多内容可以参考MSDN.
参考资料:
https://developer.mozilla.org/en-US/docs/HTTP_access_control
http://msdn.microsoft.com/ZH-CN/library/cc288060
https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS?redirectlocale=en-US&redirectslug=HTTP_access_control
《javascript高级程序设计3》
发表评论
-
webpack简单打包PC网站前端资源
2016-02-23 14:30 1624:arrow: 1. 纯前端的打包输出,比较有局限 2 ... -
grunt构建基于seajs的网站实现
2015-06-16 16:49 1089Gruntfile.js module.exports ... -
js平滑滚动回到顶部
2015-06-10 11:42 3949优先使用 requestAnimationFrame实现。 实 ... -
fis-amd 的使用与修改
2015-05-26 16:14 3907https://github.com/fex-team/fis ... -
scrollMagic 视差与滚动动画GSAP
2015-05-19 18:14 4243scrollMagic(https://github.com/ ... -
skrollr-视差滚动动画插件
2015-05-19 14:18 1695skrollr ( https://github.com/Pr ... -
stellar插件的使用
2015-05-18 17:30 1670<!DOCTYPE html> < ... -
icon font VS svg font
2015-05-14 15:21 1156关于字体图标和SVG图标,CSS TRICK网站有较好的说明。 ... -
gulp下静态资源的合并、压缩、MD5后缀
2015-05-05 15:48 22527var gulp = require('gulp'); ... -
DOMContentLoaded VS onload VS onreadystatechange
2015-04-30 14:50 69361. DOMContentLoaded 在页面html、scr ... -
简单的css3全屏滚动
2015-04-27 16:41 1399<!DOCTYPE html> <ht ... -
jquery插件treetable 的使用
2015-04-20 16:12 11834插件的文档写得不是很好,为了能弄出异步加载的功能,小折腾了一番 ... -
sublime 侧边栏字体大小修改
2015-04-16 10:46 3778【转载自:http://jekhy.com ... -
移动端的“点透”问题
2015-04-15 14:13 1601移动端的“点透”问题,这篇博文有较好的说明: http://w ... -
scheme缺少,ie的bug
2015-04-01 17:34 498在页面上定位一个资源(JS/CSS/image),通常的url ... -
大整数相加
2015-03-26 22:18 877function repeatStr(ch, n){ ... -
getBoundingClientRect 跨浏览器实现
2015-03-18 18:30 1057<head> <script ... -
window.name 跨域
2015-03-18 17:29 845window.name跨域的基础是:iframe页面在其url ... -
window.name 跨域
2015-03-18 17:27 1window.name跨域的基础是:iframe页面在其ur ... -
HTML History API
2015-03-13 18:05 1081// 替换当前浏览器history的最后一项记录。 hi ...
相关推荐
跨域的解决方案有多重JSONP、Flash、Iframe等,当然还有CORS(跨域资源共享,Cross-Origin Resource Sharing)
asp.net webforms 跨域访问
前端和后端都可以需要,给yapi测试集合的时候使用
前后端联调跨域问题
一般来说,与后台利用CORS跨域资源共享将Access-Control-Allow-Origin设置为访问的域名即可,这个需要后台的配合,且有些浏览器是不支持的。 基于与合作方后台的配合,利用nginx方向代理来满足浏览器的同源策略来...
chrome跨域插件CORS离线下载,解压后有两个压缩包,直接把B压缩包拖放到chrome插件管理页面即可。或者解压A压缩包得到一个crx文件和一个zip文件,把这两个中的任一个拖放到插件管理页面即可。
谷歌跨域插件Access-Control-Allow-Origin
使用大家说的以下配置,验证无效,跨域问题仍然存在 add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET,...
cross-request 3.1 YApi 跨域请求 谷歌浏览器
CORS or Cross Origin Resource Sharing is blocked in modern browsers by default (in JavaScript APIs). Installing this add-on will allow you to unblock this feature. Please note that, when the add-on ...
ajax跨域访问是一个老问题了,解决方法很多,比较常用的是JSONP方法,JSONP方法是一种非官方方法,而且这种方法只支持GET方式,不如POST方式安全。 即使使用jquery的jsonp方法,type设为POST,也会自动变为GET。如果...
使用YApi,在线调取接口时,需要在谷歌浏览器安装插件。解压之后,将cross-request.crx文件拖到谷歌浏览器的扩展程序页面,确认即可。
Allow-Control-Allow-Origin最新谷歌跨域扩展插件下载
跨域资源共享CORS协议介绍, cross-origin resource sharing layer
allow-control-allow-origin.crx 和 allow-control-allow-origin.zip 安装说明: 1. 请把 allow-control-allow-origin.crx 文件直接拖拉到扩展程序界面进行安装即可; 2. 如果浏览器显示程序包无效,可能浏览器版本...
解决浏览器跨域请求出现No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.问题
主要介绍了SpringBoot跨域Access-Control-Allow-Origin实现解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
设置CORS响应头实现跨域 跨源资源共享(CORS) CORS(Cross-Origin Resource Sharing),跨域资源共享。CORS 是官方的跨域解决方 案,它的特点是不需要在客户端做任何特殊的操作,完全在服务器中进行处理,支持 ...