关键词:
一、处理跨域的方式:
1.代理
2.XHR2
HTML5中提供的XMLHTTPREQUEST Level2(及XHR2)已经实现了跨域访问。但ie10以下不支持
只需要在服务端填上响应头:
1
2
3
|
header("Access-Control-Allow-Origin:*"); /*星号表示所有的域都可以接受,*/ header("Access-Control-Allow-Methods:GET,POST"); |
3.jsonP
原理:
ajax本身是不可以跨域的,
通过产生一个script标签来实现跨域。因为script标签的src属性是没有跨域的限制的。
其实设置了dataType: 'jsonp'后,$.ajax方法就和ajax XmlHttpRequest没什么关系了,取而代之的则是JSONP协议。JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问。
ajax的跨域写法:
(其余写法和不跨域的一样):
比如
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
/*当前网址是localhost:3000*/ js代码 $.ajax({ type: "get" , dataType: "jsonp" , /*加上datatype*/ jsonpCallback: "cb" , /*设置一个回调函数,名字随便取,和下面的函数里的名字相同就行*/ success: function (){ 。。。 } }); /*而在异域服务器上,*/ app.js app.get( '/showAll' ,students.showAll); /*这和不跨域的写法相同*/ /*在异域服务器的showAll函数里,*/ var db = require( "./database" ); exports.showAll = function (req,res){ /**设置响应头允许ajax跨域访问**/ res.setHeader( "Access-Control-Allow-Origin" , "*" ); /*星号表示所有的异域请求都可以接受,*/ res.setHeader( "Access-Control-Allow-Methods" , "GET,POST" ); var con = db.getCon(); con.query( "select * from t_students" , function (error,rows){ if (error){ console.log( "数据库出错:" +error); } else { /*注意这里,返回的就是jsonP的回调函数名+数据了*/ res.send( "cb(" +JSON.stringify(r)+ ")" ); } }); } |
二、解决ajax跨域访问、 JQuery 的跨域方法
JS的跨域问题,我想很多程序员的脑海里面还认为JS是不能跨域的,其实这是一个错误的观点;有很多人在网上找其解决方法,教其用IFRAME去解决的文章很多,真有那么复杂吗?其实很简单的,如果你用JQUERY,一个GETJSON方法就搞定了,而且是一行代码搞定。
下面开始贴出方法。
1
2
3
4
5
6
7
8
|
//跨域(可跨所有域名) //要求远程请求页面的数据格式为: ?(json_data) //例如: //?([{"_name":"湖南省","_regionId":134},{"_name":"北京市","_regionId":143}]) alert(json[0]._name); }); //要求远程请求页面的数据格式为: ?(json_data) //例如: //?([{"_name":"湖南省","_regionId":134},{"_name":"北京市","_regionId":143}]) alert(json[0]._name); }); |
注意,getregion.aspx中,在输出JSON数据时,一定要用Request.QueryString["jsoncallback"],将获取的内容放到返回JSON数据的前面,假设实际获取的值为42342348,那么返回的值就是 42342348([{"_name":"湖南省","_regionId":134},{"_name":"北京市","_regionId":143}])
因为getJSON跨域的原理是把?随机变一个方法名,然后返回执行的,实现跨域响应的目的。
下面一个是跨域执行的真实例子:
1
2
3
4
5
|
<script type= "text/javascript" > //跨域(可跨所有域名) $.getJSON( "http://e.hnce.com.cn/tools/ajax.aspx?jsoncallback=?" , { id: 0, action: 'jobcategoryjson' }, function (json) { alert(json[0].pid); alert(json[0].items[0]._name); }); </script> |
1
2
3
4
5
|
<script type= "text/javascript" > //跨域(可跨所有域名) $.getJSON( "http://e.hnce.com.cn/tools/ajax.aspx?jsoncallback=?" , { id: 0, action: 'jobcategoryjson' }, function (json) { alert(json[0].pid); alert(json[0].items[0]._name); }); </script> |
jQuery跨域原理:
浏览器会进行同源检查,这导致了跨域问题,然而这个跨域检查还有一个例外那就是HTML的<Script>标记;我们经常使用<Script>的src属性,脚本静态资源放在独立域名下或者来自其它站点的时候这里是一个url;这个url响应的结果可以有很多种,比如JSON,返回的Json值成为<Script>标签的src属性值.这种属性值变化并不会引起页面的影响.按照惯例,浏览器在URL的查询字符串中提供一个参数,这个参数将作为结果的前缀一起返回到浏览器;
看下面的例子:
1
2
3
4
|
响应值:parseResponse({ "Name" : "Cheeso" , "Rank" : 7}) 响应值:parseResponse({ "Name" : "Cheeso" , "Rank" : 7}) |
这种方式被称作JsonP;(如果链接已经失效请点击这里:JSONP);即:JSON with padding 上面提到的前缀就是所谓的“padding”。那么jQuery里面是怎么实现的呢?
貌似并没有<Script>标记的出现!?OKay,翻看源码来看:
页面调用的是getJSON:
1
2
3
4
|
getJSON: function ( url, data, callback ) { return jQuery.get(url, data, callback, "json" ); }, |
继续跟进
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
get: function ( url, data, callback, type ) { // shift arguments if data argument was omited if ( jQuery.isFunction( data ) ) { type = type || callback; callback = data; data = null ; } return jQuery.ajax({ type: "GET" , url: url, data: data, success: callback, dataType: type }); |
跟进jQuery.ajax,下面是ajax方法的代码片段:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
// Build temporary JSONP function if ( s.dataType === "json" && (s.data && jsre.test(s.data) || jsre.test(s.url)) ) { jsonp = s.jsonpCallback || ( "jsonp" + jsc++); // Replace the =? sequence both in the query string and the data if ( s.data ) { s.data = (s.data + "" ).replace(jsre, "=" + jsonp + "$1" ); } s.url = s.url.replace(jsre, "=" + jsonp + "$1" ); // We need to make sure // that a JSONP style response is executed properly s.dataType = "script" ; // Handle JSONP-style loading window[ jsonp ] = window[ jsonp ] || function ( tmp ) { data = tmp; success(); complete(); // Garbage collect window[ jsonp ] = undefined; try { delete window[ jsonp ]; } catch (e) {} if ( head ) { head.removeChild( script ); } }; } if ( s.dataType === "script" && s.cache === null ) { s.cache = false ; } if ( s.cache === false && type === "GET" ) { var ts = now(); // try replacing _= if it is there var ret = s.url.replace(rts, "$1_=" + ts + "$2" ); // if nothing was replaced, add timestamp to the end s.url = ret + ((ret === s.url) ? (rquery.test(s.url) ? "&" : "?" ) + "_=" + ts : "" ); } // If data is available, append data to url for get requests if ( s.data && type === "GET" ) { s.url += (rquery.test(s.url) ? "&" : "?" ) + s.data; } // Watch for a new set of requests if ( s.global && ! jQuery.active++ ) { jQuery.event.trigger( "ajaxStart" ); } // Matches an absolute URL, and saves the domain var parts = rurl.exec( s.url ), remote = parts && (parts[1] && parts[1] !== location.protocol || parts[2] !== location.host); // If we're requesting a remote document // and trying to load JSON or Script with a GET if ( s.dataType === "script" && type === "GET" && remote ) { var head = document.getElementsByTagName( "head" )[0] || document.documentElement; var script = document.createElement( "script" ); script.src = s.url; if ( s.scriptCharset ) { script.charset = s.scriptCharset; } // Handle Script loading if ( !jsonp ) { var done = false ; // Attach handlers for all browsers script.onload = script.onreadystatechange = function () { if ( !done && (! this .readyState || this .readyState === "loaded" || this .readyState === "complete" ) ) { done = true ; success(); complete(); // Handle memory leak in IE script.onload = script.onreadystatechange = null ; if ( head && script.parentNode ) { head.removeChild( script ); } } }; } // Use insertBefore instead of appendChild to circumvent an IE6 bug. // This arises when a base node is used (#2709 and #4378). head.insertBefore( script, head.firstChild ); // We handle everything using the script element injection return undefined; } |
上面的代码第1行到第10行:判断是JSON类型调用,为本次调用创建临时的JsonP方法,并且添加了一个随机数字,这个数字源于用日期值;
关注第14行,这一行相当关键,注定了我们的结果最终是<Script> ;然后是构造Script片段,第95行在Head中添加该片段,修成正果;
不仅仅是jQuery,很多js框架都是用了同样的跨域方案,这就是getJSON跨域的原理。
更多精彩内容,请点击《ajax跨域技术汇总》,进行深入学习和研究。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
跨域处理实践
关于跨域的解决办法网上很多方法,之前自己也认真考究过,测试过jsonp的实现原理,看过jquery源码中封装的$.ajax()部分内容,在此只是记录自己在项目中处理过跨域的问题。想看更加详细的可以看看《浏览器同源政策及其... 查看详情
跨域常见问题
...有什么关系,只是后端服务器的安全限制,但也可在前端处理。常见的处理方式分为: 1)前端处理 通过JSONP的方式,这里不细讲。大概的思路是,借助<script>标签不存在跨域的“BUG”,模拟向另一个服务... 查看详情
关于跨域处理方式
什么是跨域:这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不... 查看详情
处理跨域的方式
JavaScript出于安全方面的考虑,不予许跨域调用其他页面的对象,即“JavaScript同源策略的限制”。一、代理 在同域名的web服务器端创建一个代理。 什么是代理?举例: a服务器(域名:www.a.com)(非跨... 查看详情
相关前台跨域的解决方式(代码片段)
title:前端跨域处理方式date:2018-07-0800:37:29categories:Web前端tags:跨域cors关于跨域请求解觉方案问题关于浏览器跨域问题,项目中也遇到了,看了项目上一些代码的处理方式,感觉存在不少不大完善的地方,因此对于跨域,想好好梳... 查看详情
跨域的 jQuery AJAX 对于 Chrome 等工作正常,但不能在 IE10 中发送数据,也不能在 IE <= 9 中发送请求
】跨域的jQueryAJAX对于Chrome等工作正常,但不能在IE10中发送数据,也不能在IE<=9中发送请求【英文标题】:jQueryAJAXovercrossdomainworkingfineforChromeetcbutnotsendingdatainIE10andnotsendingrequestinIE<=9【发布时间】:2014-04-2111:09:33【问题描述】... 查看详情
解决浏览器跨域的几种方式
1、什么是跨域问题 在页面中使用js访问其他网站的数据时,就会出现跨域问题,比如在网站中使用ajax请求其他网站的天气、快递或者其他数据接口时,以及hybridapp中请求数据,浏览器会提 示一下错误... 查看详情
相对url:协议名跨域的一种处理方式
...avaScript的同源策略的限制,简言之就是我们常说的跨域。处理 处理跨域的方式有很多,对于前端而言,JSONP是不错的选择。但现阶段,大多数第三方平台会同时提供https和http两种协议下的可访问资源地址,尤其是CDN资源,那... 查看详情
解决跨域的方式(9种)(代码片段)
...参:?callback=show)。服务器接收到请求后,需要进行特殊的处理:把传递进来的函数名和它需要给你的数据拼接成一个字符串,例如:传递进去的函数名是show,它准备好的数据是show(‘我不爱你‘)。最后服务器把准备的数据通过HTTP... 查看详情
解决跨域问题(代码片段)
浏览器端的同源策略: 如果两个页面的协议,端口和域名中的其中任意一个不相同,它们就是不同源的,浏览器会限制他们之间的资源交互;跨域: 跨域的安全限制只针对浏览器,服务器是没有跨域的安全限制的; 解... 查看详情
利用iframe解决ajax的跨域问题
...把form请求提交到iframe里就不会将当前页面跳转,到后台处理业务访问其他域的资源,然后往页面回写JavaScript脚本的方式返回信息。前台触发链接<aclass="weui_btn 查看详情
jquery跨域调用
今天在项目中须要做远程数据载入并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发现JQuery对于Ajax的跨域请求有两类解决方式,只是... 查看详情
跨域问题
当前端页面与后台运行在不同的服务器时,就必定会出现跨域这一问题,本篇简单介绍解决跨域的三种方案,部分代码截图如下,仅供参考:方式一:使用ajax的jsonp前端代码 服务器代码 使用该方式的缺点:请求方式只能... 查看详情
解决ajax跨域的办法,代理,cors,jsonp
1、使用php做代理去请求第三方api接口 php是可以跨域的,我们利用ajax请求本域名中的php文件,php再去请求第三方接口文件,从而达到跨域目的。 php做代理请求: ajax请求本域名php代理文件: 请求结果:成... 查看详情
ajax、fetch跨域携带cookie
参考技术A原生ajax请求方式:jquery的post方法请求:服务器端设置:前后端分离,用nginx做请求跨域处理。用了fetch来替代ajax,访问正常,但是请求时没带cookie,就加了credentials:"include"在后台配置1、问题原因:cookie的作用域是domain... 查看详情
Jquery:使用 laravel 的跨域 ajax 'POST'
】Jquery:使用laravel的跨域ajax\\\'POST\\\'【英文标题】:Jquery:Cross-domainajax\'POST\'withlaravelJquery:使用laravel的跨域ajax\'POST\'【发布时间】:2015-02-0308:09:32【问题描述】:我正在尝试从jquery的另一个域的laravel服务器上执行ajax\'POST\'。... 查看详情
处理跨域 jsonp 调用的 jQuery.ajax 错误
】处理跨域jsonp调用的jQuery.ajax错误【英文标题】:handlingjQuery.ajaxerrorsforcross-domainjsonpcalls【发布时间】:2011-12-0218:13:45【问题描述】:我构建了一个ajax调用(jQuery1.6.2)的测试用例,如下所示:jQuery(document).ready(function($)vartest=functio... 查看详情
跨域的几种方法(代码片段)
...属性就是后端api接口的地址,并且以get的方式将前端回调处理函数名称告诉后端,后端在响应请求时会将回调返还,并且将数据以参数的形式传递回去。前端://http://127.0.0.1:8888/jsonp.htmlvarscript=document 查看详情