才看到W3C的cross original resource sharing,又多了一种跨域的选择.
(官方的跨域解决出现了,看了下文档时间貌似很久了...我果然很out)
那和民间标准jsonp 比有啥优势呢:
1.支持多种http方法
jsonp一般只支持get方法。
而w3c的cross orginal resouce sharing 支持http的其他几种方法,例如put,delete...
2.简单
对于服务端来说,设置一个response head 就能搞定W3C CORS,
Access-Control-Allow-Origin: http://your site
检查下origin就可以选择是否要返回response.
而对于jsonp来说,要进行安全检查
3.安全
这个就不废话了,jsonp就是script注入,跨站攻击一般都会考虑....
劣势:
这玩意儿要看浏览器颜色,和HTML5一样 不是谁都可以用的........
----------------------------------------------------------------------
W3C CORS客户端实现
只搞了FF的,IE的貌似是XDomainRequest.....下次补上
var XCOS = function(type,url){
var xhr = new XMLHttpRequest();
if (xhr && "withCredentials" in xhr){
xhr.open(type, url, true);
}
else xhr = null;
var success = function(msg,obj){
alert(msg);
};
var error = function(obj){
alert("error");
};
var handle_load = function (event_type) {
return function (XHRobj) {
if (event_type == 'load' && (XHRobj.readyState == 4) && success)
success(XHRobj.responseText, XHRobj);
else if (error)
error(XHRobj);
};
};
try {
xhr.withCredentials = true;
} catch(e) {};
xhr.onload = function (e) { handle_load('load')(e.target); };
xhr.onerror = function (e) { handle_load('error')(e.target); };
xhr.send();
};
W3C 服务端代码:
response.setHeader("Access-Control-Allow-Origin","xyz")
response.setHeader("Access-Control-Allow-Methods","get")
最后 我承认以下写的比我好多了
http://hacks.mozilla.org/2009/07/cross-site-xmlhttprequest-with-cors
http://www.w3.org/TR/cors/
分享到:
相关推荐
跨域的解决方案有多重JSONP、Flash、Iframe等,当然还有CORS(跨域资源共享,Cross-Origin Resource Sharing)
JSON to JSONP- Bypass Same-Origin Policy
跨域及用户验证 CommonServer 启动公共服务,其他几个项目都请求这个服务的接口,产生跨域 npm run common JSONP 核心原理: 利用script请求后端数据,解析执行,通过传入浏览器... JSONP.CommonUrl = JSONP.CommonUr
阿里云广告投放内容获取jsonp接口-对接文档-0818by审配1
$jsonp ( '/some-jsonp-url' , { myCustomUrlParam : 'veryNice'} ) 直接使用功能: import { jsonp } from 'vue-jsonp'jsonp ( '/some-jsonp-url' , { myCustomUrlParam : 'veryNice'} )发送数据并设置查询和函数...
ajax跨域访问是一个老问题了,解决方法很多,比较常用的是JSONP方法,JSONP方法是一种非官方方法,而且这种方法只支持GET方式,不如POST方式安全。 即使使用jquery的jsonp方法,type设为POST,也会自动变为GET。如果...
在做项目的时候,会遇到前后台分离开发,需要用到ajax跨域,在后台方面,需要对项目进行相关配置,配置所需要的jar包都在这里面,导入到项目里面就可以进行设置了
官方离线安装包,亲测可用
vue-resource是一个通过XMLHttpRequrest或JSONP技术实现异步加载服务端数据的Vue插件,提供了一般的 HTTP请求接口和RESTful架构请求接口,并且提供了全局方法和Vue组件实例方法。
适用于axios的jsonp适配器支持承诺,支持取消,与xhr相同安装npm install axios-...axios({ url: '/jsonp', adapter: jsonpAdapter, callbackParamName: 'c' // optional, 'callback' by default}).then((res) => {});
3000端口: 为前端界面,前端静态资源放在3000端口的服务器上3001端口: 为后端接口服务器目录Set Up运行环境node.js 全局安装npm 全局安装运行步骤git clone git@github.com:FatDong1/cross-domaincross-domain目录下...
在页面a中由前端发送一个jsonp请求到客户方,得到一个token值 前端得到token值后向自己后端发送一个请求,后端根据token去redis(token的值就是redis里的key)里取值(key=token的值,value=用户信息等)判断用户是否已...
jsonp重试 jsonp的简单实现,它提供了超时和重试功能,当主请求由于超时而失败时,将有很多重试。 令人惊讶的是,您可以使用jsonp-retry自动将响应数据存储到localStorage,然后如果它检测到存储数据可用,则可以从...
使用JSONP主要是目的通过动态创建Script,动态拼接url,进而抓取数据,实现跨域。这篇文章主要介绍了VUE2.0中Jsonp的使用方法(前端),需要的朋友可以参考下
这篇文章主要给大家介绍了关于Django跨域请求问题解决的相关资料,文中介绍的实现...No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 这是由于CORS导致的。 什么是CORS? CORS
看见这问题相信大家都不会陌生,也会很自然的得到解决方案,但是我这里真的不想touch任何服务端代码,用jsonp吧,但是服务端没实现契约。 在这里我是时候引入主角yahoo提供的jsonp代理:http://query.yaho
vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁。另外,vue-resource还提供了...
jsonpDemojsonp解决浏览器跨域问题--样例工程代码
引言 跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,...所以折腾了下闻名已久的CORS(跨域资源共享,Cross-Origin Resource Sharing),这边文章也就是折腾期间的小记与总结。 •CORS能做什么
跨域请求一直是网页编程中的一个难题,在过去,绝大多数人都倾向于使用JSONP来解决这一问题。不过现在,我们可以考虑一下W3C中一项新的特性——CORS(Cross-Origin Resource Sharing)了。