跨域问题及其简单的解决方案

原创 2016年08月30日 15:11:02

1、什么是跨域

      当请求不同域名下的资源时,就会产生跨域请求问题。

2、跨域请求的产生的原因

      浏览器的同源策略造成了跨域问题(同源策略严格限制不同域名下的文档、脚本之间的交互)。

3、JSONP原理

      首先,在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)传给服务器。

      注意:服务端得到callback的数值后,要用jsonp1236827957501(......)把将要输出的json内容包括起来,此时,

       服务器生成 json 数据才能被客户端正确接收。

      然后,以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 'jsoncallback'的值 jsonp1236827957501 .

      最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端,  客户端浏览器,解析script标签,

      并执行返回的 javascript 文档,此时javascript文档数据,作为参数,

      传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里.(动态执行回调函数)

4、跨域问题如何解决

     现在基于前端Jquery中的ajax方法和后台的SpringMVC框架做一个简要的说明

     前端的代码:

     	<script>
		function test() {
			$.ajax({
				url:"../../login/getCash.do",
				type:"get",
				jsonp:"callback",
				async: false,
				jsonpCallback:"fun1",
				dataType:"jsonp",
				success:function(data) {
					//回调方法
                                        //data是服务器端返回的数据
				},
				error:function(){
				}
				
			});
		}
		//这个是本地自定义的回调函数,可以省略,直接在ajax的回调方法里实现业务逻辑
		function fun1(fun) {
			alert(fun);
		}
	</script>

      后台代码:

        @RequestMapping(value="/getCash.do")
	@ResponseBody
	public void getAcccountJsonP(HttpServletRequest request, HttpServletResponse res, String callback) {
		Result result = this.getResult();
		Map<String, Long> mm = null;
		 
		try {
			if (StringUtils.isNoneEmpty(callback)) {
				result = externService.getAccountInfo(result, 2);//result.getUserInfo().getUserId());
				mm = result.getData();
			} else {
				//do nothing
				callback = "unknow";
			}
			//设置返回格式
			res.setContentType("text/plain"); 
			res.getWriter().write(callback + "("+JSONObject.toJSONString(mm)+")");
		}catch(Exception e) {
			result = this.error(result, e);
		}finally {
			this.send(result);
		}
	}
     

   本人才疏学浅,如有纰漏多多指教!
   @飞不高的鹰
版权声明:本文为博主原创文章,未经博主允许不得转载。

Dubbox Rest 解决跨域问题

DubboxRest跨域问题解决       a、ajax请求参数中,json格式需要标准格式,手动拼接引号  var data = "{\"title\":\""+title+ ...
  • bird0211
  • bird0211
  • 2016年12月21日 19:22
  • 1929

跨域的三种方法总结:代理,JSONP,以及XHR2

Javascript出于安全方面的考虑,不允许跨域调用其他页面的对象。 什么是跨域呢? 简单地理解就是因为javascript同源策略的限制,a.com域名下的js无法操作b.com或...
  • zmx729618
  • zmx729618
  • 2016年05月03日 10:01
  • 3251

跨域问题出现原因和解决方案

【出现原因】什么是跨域以及产生原因 跨域是指a页面想获取b页面资源,如果a、b页面的协议、域名、端口、子域名不同,或是a页面为ip地址,b页面为域名地址,所进行的访问行动都是跨域的,而浏览器为了...
  • qq_31617637
  • qq_31617637
  • 2017年06月09日 11:09
  • 1731

Web应用跨域访问及单点登录解决方案汇总

做过跨越多个网站的Ajax开发的朋友都知道,如果在A网站中,我们希望使用Ajax来获得B网站中的特定内容,如果A网站与B网站不在同一个域中,那么就出现了跨域访问问题。Ajax的跨域访问问题是现有的Aj...
  • huikaichedeyeren
  • huikaichedeyeren
  • 2016年06月02日 11:34
  • 8333

JAX-RS开发(四):ajax跨域访问REST服务时的cors解决方案

上一篇博客我们通过JSONP解决AJAX跨域问题,本文将通过CORS来解决跨域问题。CORS是HTML5新推出的,需要较高版本的浏览器才能支持。我用的IE11和Chrome41,都是支持CORS规范的...
  • aitangyong
  • aitangyong
  • 2015年04月15日 19:52
  • 2548

润乾报表跨域问题解决方案

  • 2013年04月26日 12:56
  • 444KB
  • 下载

js跨域问题解决方案.

  • 2016年08月15日 16:17
  • 3KB
  • 下载

Geoserver跨域问题解决方案

  • 2017年12月06日 12:42
  • 29KB
  • 下载

ajax跨域问题解决方案

今天来记录一下关于ajax跨域的一些问题。以备不时之需。跨域同源策略限制同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说,受到请求的 URL 的域必须与当前 Web 页面的域相...
  • Marksinoberg
  • Marksinoberg
  • 2017年06月20日 17:05
  • 7850

IE下iframe跨域session和cookie失效问题的解决方案

问题来源: 何为跨域跨域session/cookie? 也就是第三方session/cookie。第一方session/cookie指的是访客当前访问的网站给访客的浏览器设置的seesio...
  • z69183787
  • z69183787
  • 2014年09月05日 21:12
  • 4486
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:跨域问题及其简单的解决方案
举报原因:
原因补充:

(最多只允许输入30个字)