jQuery跨域问题解决方法

跨域访问时web前端开发者经常遇到的问题,那么什么是跨域呢?

跨域的慨念:

只要协议,域名,端口任何一个不同,都被当作是不同的域。例如在A网站中,我们希望通过AJAX获得B网站中特定的内容,此时A网站和B位置不在同一个域,那么就出现了跨域访问问题。可以理解为两个域名之间不能跨国域名来发送请求或是请求数据,否则就是不安全的。

解决跨域访问的方法:

1.代理

2.在服务器端设置相应的响应头

3.JSONP

接下来,我详细的介绍一下jQuery中的JSONP是如何解决跨域访问的。

JSONP(Json with Padding)是资料格式Json的一种“使用模式”,可以让网页从别的网域获得资料。

JSONP也叫填充式JSON,是应用JSON的一种新方法,只不过是被包含在函数中调用的JSON。

JSONP的组成部分:

回调函数:当响应到来时应在网页调用的函数;

数据:传入回调函数中的JSON数据。

JSONP跨域访问原理:

利用<Script>标签,在网页上使用JS脚本文件,通过XMLHTTPRquest请求不同域上的数据。

原始的JS跨域访问:

后台有一个处理路径“/test”的函数:

//路径处理
app.get("/test",user.test);
//处理函数
exports.test=function(req,res){
    res.end("alert(‘JS跨域访问‘)");
};

外部有一个网页需要访问路径”/test“下的内容,则可以通过JS脚本文件来跨域访问:

//处理函数
<script>
    function method(data){
        console.log(data);
    }
</script>
//跨域访问
<script src="http://localhost:3000/test"></script>

结果会在当前的网页中弹出一个窗口:

jQuery中JSONP跨域访问的实现:

同样在后台有一个处理路径“/test”的函数:

//路径处理
app.get("/test",user.test);
//处理函数
exports.test=function(req,res){
  res.end("method("+JSON.stringify({mes:"跨域访问成功!"})+")");
};

外部有一个网页需要访问路径”/test“下的内容,通过JSONP来实现跨域访问:

//引入跨域访问中的jQuery函数库
<script src="http://localhost:3000/js/jquery-1.9.1.min.js"></script>
//jQuery中JSONP跨域访问
<script>
    $.ajax({
        url:"http://localhost:3000/test",
        type:"get",
        success:function(data){
            $("body").append(data.mes);
        },
        dataType:"jsonp",
        jsonpCallback:"method"
    });
</script>

结果会在当前的网页中显示如下信息:

通过上述代码我们可以看出JSOPN跨域访问和原始的JS跨域访问的不同之处是JSONP不需要写处理跨域访问的函数(例如上述方法中使用的method函数),在JSONP跨域访问时会自动帮我们创建处理跨域访问的函数。

JSONP跨域访问的优点:

1.它不像XMLHTTPRequest对象实现的AJAX请求那样受到同源策略的限制;

2.它的兼容性更好,不需要XMLHTTPRequest或ActiveX的支持;

3.在请求完成后可以通过调用callback的方法传回结果。

JSONP跨域访问的缺点:

1.它只支持GET请求而不支持POST及其他类型的请求;

2.它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

时间: 2024-08-06 11:30:41

jQuery跨域问题解决方法的相关文章

IE8 jquery跨域问题解决

1.IE8 jquery跨域问题解决: 加下面code 源地址: https://github.com/dkastner/jquery.iecors/blob/master/jquery.iecors.js (function( jQuery ) { // Create the request object // (This is still attached to ajaxSettings for backward compatibility) jQuery.ajaxSettings.xdr

odoo Controller接口开发 POST请求的跨域问题解决方法

odoo Controller接口开发 POST请求的跨域问题解决方法 1.odoo Controller接口开发,前端在请求的时候会发生跨域问题,报错信息如下:Function declared as capable of handling request of type 'json' but called with a request of type 'http' 2.解决方法如下: odoo官网给的参数解释: cors – The Access-Control-Allow-Origin c

前端跨域问题解决方法

1.什么是跨域及产生原因 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,或是a页面为ip地址,b页面为域名地址,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源. 跨域情况如下: url 说明 是否跨域 http://www.cnblogs.com/a.jshttp://www.a.com/b.js 不同域名 是 http://www.a.com/lab/a.jshttp://www.a.com/script/b.js

canvas关于getImageData跨域问题解决方法

一.问题:在使用html5的canvas是,当用到getImageData方法获取图片信息时,会碰到跨域无法获取的情况,代码如下: document.getElementById("pic").onload=function(){ var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("

AJAX跨域问题解决方法(1)——禁止浏览器进行跨域限制

思路:通过命令行修改浏览器启动参数,使得浏览器不进行跨域检查,从而允许跨域 方法:命令行参数启动浏览器后添加参数--disable-web-security 例:chrome --disable-web-security --disabl-web-security参数的作用是禁止浏览器进行跨域检查 但是,这种方法有三个缺点: 1.每次启动浏览器都需要通过命令行启动,太过繁琐 2.该方法会导致安全性方面的问题 3.该方法是客户端方面的改动,在实际使用中,在每个客户端上都禁止浏览器进行跨域检查不太现

web项目中的跨域问题解决方法

一种是JSONP 一种是 CORS. 在客户端Javascript调用服务端接口的时候,如果需要支持跨域的话,需要服务端支持. JSONP的方式就是服务端对返回的值进行回调函数包装,他的优点是支持众多的浏览器, 缺点是仅支持Get的方式对服务端请求. 另一种主流的跨域方案是CORS,他仅需要服务端在返回数据的时候在相应头中加入标识信息.这种方式非常简便.唯一的缺点是需要浏览器的支持,一些较老的浏览器可能不支持CORS特性. 跨域支持是创建WebService时应该考虑的一个功能点,文中是使用Se

关于jquery跨域请求方法

项目中关于ajax jsonp的使用,出现了问题:可以成功获得请求结果,但没有执行success方法总算搞定了,记录一下 function TestAjax() {    $.ajax({        type : "get",        async : false,        url : "ajaxHandler.ashx", //实际上访问时产生的地址为: ajax.ashx?callbackfun=jsonpCallback&id=10   

jQuery 跨域访问问题解决方法

浏览器端跨域访问一直是个问题, 多数研发人员对待js的态度都是好了伤疤忘了疼,所以病发的时候,时不时地都要疼上一疼.记得很久以前使用iframe 加script domain 声明,yahoo js util 的方式解决二级域名跨域访问的问题. 时间过得好快,又被拉回js战场时, 跨域问题这个伤疤又开疼了. 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅了相关资料,算是解决了跨域问题..有必要记下来备忘. 跨域的安全限制都是指浏

jQuery跨域请求,跨域Post提交数据的方法(.net/SQL技术交流群206656202 入群需注明博客园) - 思...

jQuery跨域请求,跨域Post提交数据的方法(.net/SQL技术交流群206656202 入群需注明博客园) - 思... 无聊透顶,网上看看技术文章吸收下精华,无意中发现很多开发人员在跨域请求方面很是疑惑,本人整理了一下曾经写过的代码供苦苦寻找解决方案的IT人一点灵感,如果认为自己是高手呢那么您就可以潇洒的飘过了~~废话不说了免得招人烦~~ 一.get方式实现跨域请求 这里我使用jQuery.getJSON()函数实现      a站点 http://bj.xxxx.com.aspx 请