博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JSONP解决ajax跨域问题
阅读量:5061 次
发布时间:2019-06-12

本文共 1783 字,大约阅读时间需要 5 分钟。

在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 JSONPdataType: "jsonp", // tell YQL what we want and that we want JSONdata: {q: "select title,abstract,url from search.news where query=\"cat\"",format: "json"}, // work with the responsesuccess: 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请求时也是这么做的,去可以窥见一斑。

  • References:
 

转载于:https://www.cnblogs.com/killbug/p/4121709.html

你可能感兴趣的文章
2018回归博客园
查看>>
Excelutil 工具类
查看>>
JS表单验证-12个常用的JS表单验证
查看>>
Android开发:TableFixHeaders源码分析
查看>>
Bootstrap Popover(弹出框)弹出自定义格式代码
查看>>
Android零基础入门第87节:Fragment添加、删除、替换
查看>>
DNA Sorting--hdu1379
查看>>
文件上传
查看>>
Java 并发:Future FutureTask
查看>>
44 JavaScript
查看>>
alpha-咸鱼冲刺day3-紫仪
查看>>
Python 条件判断 循环
查看>>
ps -ef 和 aux 区别
查看>>
zoj 2165 Red and Black
查看>>
关系数据库(RDBMS)小记
查看>>
[转载]OpenGL矩阵变换 一篇很好的译文
查看>>
初级算法——盒子取球方法(蓝桥杯)
查看>>
“由于这台计算机没有终端服务器客户端访问许可证”解决方案
查看>>
IE每次关闭都提示IE已停止工作
查看>>
个人复习JavaScript重点(总结一)
查看>>