JSONP解决ajax跨域问题
在A域名下,用ajax请求B域名下的请求,会报类似这样的错误:No 'Access-Control-Allow-Origin' header is present on the requested resource.
在响应头中加入一个属性:response.setHeader(
"Access-Control-Allow-Origin"
,
"*"
); 可以解决,但都说有安全问题...
那么就用jsonp的方式解决。
-------20141127----------
补充:事实上html中所有带src属性都可以绕过跨域问题,比如img。如果一个请求不需要返回业务数据,如广告点击计数,那么就可以用img的src来请求后台。
-------20141127----------
下面是转的文章:
JSONP是如何工作的?
我对这个问题的探究来源于一个需求:
当访问某个页面的时候,需要向另外一个网站报告一下这次访问的信息。
其实发一个跨域的请求就能大致实现这个需求。我们发跨域的例子其实很常见,例如请求一个第三方的图片、引入一个第三方的样式文件、引入一个cdn上的js文件。然后,说到发送请求,在这个web2.0的时代,我们自然而然会想到Ajax请求。但是遗憾的是,考虑到安全问题,即所谓的同源安全策略,用ajax请求一个第三方的地址是被浏览器所禁止的。然而天无绝人之路,有个叫JSONP的技术就是来解决这种问题的。
说道JSONP,可能多数人对它的知晓程度仅限于jQuery,jQuery提供了发送jsonp请求的方法。比如在使用$.ajax()方法的时候:
// Using YQL and JSONP
$.ajax({
url: "http://query.yahooapis.com/v1/public/yql", // the name of the callback parameter, as specified by the YQL service
jsonp: "callback", // tell jQuery we're expecting JSONP
dataType: "jsonp", // tell YQL what we want and that we want JSON
data: {
q: "select title,abstract,url from search.news where query=\"cat\"",
format: "json"
}, // work with the response
success: function( response ) {
console.log( response ); // server response
}
});
jQuery将jsonp请求封装成类似ajax请求的样子,这样能让开发者在使用的时候更加方便,但是实际上,jsonp压根不是通过XMLHttpRequest来实现的。
一个简单的JSONP请求可以通过一下代码实现:
var callbackName = 'iAmTheCallback';
window[callbackName] = function (uuu, vvv, www) {
// 对返回的数据做后续处理
} var script = document.createElement( 'script');
script.src = 'http://melon.github.io/xxx/yyy?callback='+callbackName;
document.body.appendChild(script);
这是前端部分的代码,要想真正实现JSONP的功能,还需要后端的配合。针对上面这个例子,当前端请求这个script地址的时候,后端只要按以下内容响应就会有神奇的效果:
iAmTheCallback( 'abc', 'def', 'ghi');
说道这儿,很多人也许就恍然大悟了。JSONP名字听着高端,其实也不过如此嘛。
实际上,jQuery发JSONP请求时也是这么做的,去这里可以窥见一斑。
最新文章
- Entity Framework 6 Recipes 2nd Edition(12-7)译 ->; 设定默认值
- Ubuntu菜鸟入门(八)—— QQ安装
- HTML当中特殊字符的表示
- post multipart data boundary问题 使用curl 向jersey post文件
- iPhone取消软件更新上边的1
- vs2015社区版不支持installshield
- 测试一个域名DNS查询时间的shell脚本
- 华为章宇:如何学习开源项目及Ceph的浅析
- 微软Hololens学院教程- Holograms 100: Getting Started with Unity【微软教程已经更新,本文是老版本】
- wps 2012-2013 通杀漏洞(CVE-2013-3934)
- 基于Delphi的Socket I/O模型全接触 good
- android 76 使用get post方式提交数据
- Qt 操作 pdf 文件
- C++中的静态类型和动态类型的定义
- UIView的绘制原理
- Windows 环境下 wampserver 与 phpStudy 的环境配置
- 缓存算法(FIFO 、LRU、LFU三种算法的区别)
- tensorflow项目构建流程
- java线程系列文章之一(线程的安全性)
- USB-Redirector-Technician 永久破解版(USB设备映射软件)