跨域问题解决

参考链接：https://www.cnblogs.com/xiaoxiaoccaiya/p/7088176.html

https://blog.csdn.net/jlin991/article/details/56846190

 

1、什么是跨域

 

简单的来说，出于安全方面的考虑，页面中的JavaScript无法访问其他服务器上的数据，即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制，实现不同服务器之间通信的效果。

 

具体策略限制情况可看下表：

URL	说明	允许通信
http://www.a.com/a.js http://www.a.com/b.js	同一域名下	允许
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不同文件夹	允许
http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不同端口	不允许
http://www.a.com/a.js https://www.a.com/b.js	同一域名，不同协议	不允许
http://www.a.com/a.js http://127.0.0.100/b.js	域名和域名对应ip	不允许
http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不同	不允许
http://www.a.com/a.js http://a.com/b.js	同一域名，不同二级域名（同上）	不允许
http://www.a.com/a.js http://www.b.com/b.js	不同域名	不允许

 

2、什么是JSONP？

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，而JSONP（JSON with Padding）则是JSON 的一种“使用模式”，通过这种模式可以实现数据的跨域获取。 

 

3、JSONP跨域的原理

在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的，但img、iframe、script等标签是个例外，这些标签可以通过src属性请求到其他服务器上的数据。利用script标签的开放策略，我们可以实现跨域请求数据，当然，也需要服务端的配合。当我们正常地请求一个JSON数据的时候，服务端返回的是一串JSON类型的数据，而我们使用JSONP模式来请求数据的时候，服务端返回的是一段可执行的JavaScript代码。

 

余理解：ajax不允许跨域访问json数据，但是允许跨域访问js。故将原数据包装到js语句里面，一起返回给浏览器。

 

举个例子，假如需要从服务器（http://www.a.com/user?id=123）获取的数据如下：

1. {"id": 123, "name" : 张三, "age": 17}

那么，使用JSONP方式请求（http://www.a.com/user?id=123?callback=foo）的数据将会是如下： 

1. foo({"id": 123, "name" : 张三, "age": 17});

当然，如果服务端考虑得更加充分，返回的数据可能如下： 

1. try{foo({"id": 123, "name" : 张三, "age": 17});}catch(e){}

这时候我们只要定义一个foo()函数，并动态地创建一个script标签，使其的src属性为http://www.a.com/user?id=123?callback=foo： 

便可以使用foo函数来调用返回的数据了。 

 

4、我的测试代码

亲测可行

 

 

5、spring4.1之后提供了工具类MappingJacksonValue对返回数据进行封装；

 

@RequestMapping(value = "item/list", produces = MediaType.APPLICATION_JSON_VALUE + ";charset=utf-8")
	@ResponseBody
	public Object getCrossData(String callback) {
		MyResult result= myService.getDataList();
		MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(result);
		mappingJacksonValue.setJsonpFunction(callback);
		return mappingJacksonValue;
	}

 

6、解决跨域问题，cors访问也是不错的选择。

 

这里有一篇相当详尽移动的文章：

 

http://www.ruanyifeng.com/blog/2016/04/cors.html

 

讲解跨域访问时，如何设置”Access-Control-* “的值、简单请求（simple request）和非简单请求（not-so-simple request）... .. 等等。

 

个人感觉比jsonp好用。