14、请求跨域问题（伪静态、jsonp跨域访问）

伪静态

伪静态是相对真实静态来讲的，通常我们为了增强搜索引擎的友好面，都将文章内容生成静态页面，但是有的朋友为了实时的显示一些信息。或者还想运用动态脚本解决一些问题。不能用静态的方式来展示网站内容。但是这就损失了对搜索引擎的友好面。怎么样在两者之间找个中间方法呢，这就产生了伪静态技术。就是展示出来的是以html一类的静态页面形式，但其实是用ASP一类的动态脚本来处理的。

• 总结:以html形式展现动态页面效果
• 前提:搜索引擎(百度/360)一般只会收录HTML页面信息
• 搜索引擎工作原理:
  倒排索引规则:根据关键字检索文章位置
  

跨域访问

域名与url地址相同时可以正常访问
域名与url地址不同时 访问的状态码200表示成功.但是实际数据无法获取

同源策略（浏览器端的解析策略）

规定:如果 协议://域名:端口都相同时,为同域访问.浏览器可以正常的解析数据.

如果上述的三项有一项不同,则表示跨域访问.浏览器可以正确的请求数据.但是不予解析返回值

跨域实现原理

1. 利用javascript里边的src属性的开放原则实现跨域
2. 定义回调函数
3. 封装返回值数据 回调函数名称(json数据)

利用src的开放策略 进行跨域访问
自定义回调函数 hello

<script type="text/javascript">
		/*JS是解释执行的语言  */
		/*2定义回调函数  */
		function hello(data){
			alert(data.name);
		}
	</script>
	<!--该json一直保存到浏览器中等待调用,但是没有函数名称无法调用  -->
	<script type="text/javascript" src="http://manage.test.com/test.json"></script>
	<script type="text/javascript" src="http://manage.test.com/js/jquery-easyui-1.4.1/jquery.min.js"></script>

json数据

hello({"id":1,"name":"test"})

jsonp

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的< script> 元素是一个例外。利用 < script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

jQuery-JSONP跨域

前端请求

$.ajax({
	url:"http://manage.jt.com/web/testJSONP",
	type:"get",				//jsonp只能支持get请求
	dataType:"jsonp",       //dataType表示返回值类型
	//jsonp: "callback",    	//指定参数名称
	//jsonpCallback: "hello",  //指定回调函数名称
	success:function (data){   //data经过jQuery封装返回就是json串
		alert(data.id);
		alert(data.name);
	}	
});

原理说明:

1. url跨域地址已经人为指定了
2. 回调函数自己没有定义. jQuery底层实现时自定生成了回调函数
3. 将自动生成的函数的名称 通过默认的属性 ?callback=函数名称()进行传递.
4. 后台服务器 获取函数名称之后 拼接json数据 callback(json)
   JSONP跨域请求过程:
   http://manage.jt.com/web/testJSONP?callback=jQuery111109956610654936453_1560396296777&_=1560396296778(回调函数名称)

后台实现（一）

//在后台编辑方法
@RestController
public class JSONPController {	
	//返回值要求: 回调函数(json数据);
	@RequestMapping("/web/testJSONP")
	public String testJSONP(String callback) {
		User user = new User();
		user.setId(1);
		user.setName("test");
		String json = ObjectMapperUtil.toJSON(user);	//自己封装的对象json互转工具类
		return callback +"("+json+")";
	}
}

后台实现（二）

@RequestMapping("/web/testJSONP")
public JSONPObject jsonp(String callback) {
	User user = new User();
	user.setId(1);
	user.setName("test");
	//spring提供的处理jsonp数据封装类
	JSONPObject object = new JSONPObject(callback, user);	
	return object;
}

JSONP与HttpClient区别

jsonp：前台页面发起Ajax请求到跨域服务
HTTPClient：后台程序模拟前台发起HTTP请求到跨域服务

• 请求方式不同:
  HttpClient:请求方式多元化.
  JSONP:请求方式 浏览器解析js发起AJAX
• 接收端不同:
  HttpClient:自身Controller接收用户请求之后完成处理
  JSONP:直接进行跨域访问.访问远程服务器.
• 返回值类型不同;
  HttpClient: 可以直接返回JSON数据/xml(报文)
  JSONP: 返回时必须经过特殊的格式封装 callback(JSON/String)
• 目的不同:
  HttpClient: 在任何位置都可以发起请求 (业务需要)
  JSONP:只能在浏览器端 发起AJAX请求 (一般查询操作,安全性问题)
• 调用层级不同:
  HttpClient: 前台---->controller
  JSONP:service---->controller