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

原创 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);
		}
	}
     

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

相关文章推荐

前端解决跨域问题的8种方案

原文地址:http://www.cnblogs.com/JChen666/p/3399951.html 1.同源策略如下: URL 说明 是否允许通信 ...

Dubbox Rest 解决跨域问题

DubboxRest跨域问题解决       a、ajax请求参数中,json格式需要标准格式,手动拼接引号  var data = "{\"title\":\""+title+ ...

在Dubbo中开发REST风格的远程调用(RESTful Remoting)

在Dubbo中开发REST风格的远程调用

前端解决跨域问题的8种方案(最新最全)

原文:http://www.cnblogs.com/JChen666/p/3399951.html 1.同源策略如下: URL 说明 是否允许通信 ...
  • Joyhen
  • Joyhen
  • 2014年03月20日 16:52
  • 171869

三种方法解决跨域问题

javascript跨域访问是web开发者经常遇到的问题,什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档属性,下面将列出三种实现javascript跨域方法:  1.基于iframe实...

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

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

js跨域问题解决方案.

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

vue-cli开发环境跨域问题解决方案

前后端分离开发中必要会遇到的问题—跨域。

webview跨域问题解决方案

hi,all      本邮件分六部分:目的、意义、步骤、具体实现及测试办法,调研结论(3点),额外思考 一、调研目的         浏览器的同源策略阻止了跨域访问,本次调研目的就是为了解决这个问...

Flex跨域访问沙箱问题解决方案

转:http://developer.51cto.com/art/201007/215246.htm 本文和大家重点讨论一下Flex跨域访问的沙箱问题,当Flex访问WebService服务...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:跨域问题及其简单的解决方案
举报原因:
原因补充:

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