伪静态，跨域请求JSONP、CORS-CFANZ编程社区

1 拦截静态资源.html

1.1 业务分析
通常情况下,需要获取商品信息时,一般采用都是restFul风格, {itemId}.html 要求后端服务器应该拦截.html为结尾的请求即可.
在这里插入图片描述
1.2 以.html结尾的优势
如果网站页面以.html为结尾的请求,则该页面更加容易被搜索引擎记录. 通过搜索引擎提高网站的曝光率.搜索引擎工作原理:

1.3 后台服务器拦截策略
1.默认条件下后台服务器只拦截前缀型请求.
2.如果在浏览器中写入index.html 则后台服务器认为,请求的是一个具体的静态页面.
3.如果需要后台服务器拦截静态页面,之后通过服务器进行中转,则需要额外的配置

package com.jt.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.PathMatchConfigurer;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class MvcConfigurer implements WebMvcConfigurer{
	
	//开启匹配后缀型配置  .html请求时 springMVC才会拦截.
	@Override
	public void configurePathMatch(PathMatchConfigurer configurer) {
		
		configurer.setUseSuffixPatternMatch(true);
	}
}

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

1.5关于.html文件拦截的说明
1.5.1 问题描述
说明
1.:图中的后缀代表着什么?
.html: 静态页面/动态页面 静态页面.
在这里插入图片描述
2.关于静态页面的说明:
当用户访问:https://i-item.jd.com/100017623382.html请求时,应该跳转的是指定的某个html页面.之后通过ajax请求根据itemId查询相关的商品的信息.之后通过JS在指定的位置中展现商品数据.

3.关于url中取值的说明:
由于商品的ID号为于URL中而后端程序需要通过url中的Id查询数据信息.所以这里的取值方式必然是restFul的风格…

4.SpringMVC应该如何拦截请求路径???
url1:localhost:8091/items/addUser
url1:localhost:8091/items/updateItem
url1:localhost:8091/items/100100.html
@RequestMapping(“/items/{itemId}.html”)
说明:如果需要实现该功能,则应该拦截.html结尾的请求.

1.5.2 关于.html拦截的说明
默认的条件下 SpringMVC只拦截前缀型请求. 如果遇到静态资源的请求.则一般默认的条件下.去查询webapp中的文件.
问题: 如何让程序被SpringMVC拦截呢?
在这里插入图片描述
1.5.3 开启后缀类型匹配
说明:通过配置文件,要求SpringMVC拦截后缀型请求. 以.html为例

1.5.4 为什么要以.html结尾
说明:由于现在的电商网站,都需要搜索引擎进行引流. 以为了让搜索引擎更加容易的记录网站的内容.一般页面信息都是以.html结尾的.
结论: 一般的搜索引擎只记录.html的静态页面信息. 这样做的目的可以有效的增加搜索引擎的曝光率.

1.5.5 搜索引擎工作原理
倒排索引: 根据关键字,检索文章的位置.
在这里插入图片描述

2 关于跨域问题说明

2.1 跨域测试
2.1.1 测试demo1
1).访问页面的网址 http://manage.jt.com:80/test.html
2).Ajax访问数据的地址: http://manage.jt.com:80/test.json
分析: 协议://域名:端口完全一致.
测试是否正常: 测试正常
结论: 如果协议://域名（或IP）:端口号都相同时请求可以正常的进行.
2.1.2 测试demo2
1).访问页面的网址 http://www.jt.com:80/test.html
2).Ajax访问数据的地址: http://manage.jt.com:80/test.json
分析: 协议://域名（或IP）:端口域名不同.
测试结果: ajax调用无法正常执行.
2.1.3 关于浏览器同源策略的说明
说明: 浏览器规定当浏览器解析页面时,当遇到ajax请求时如果请求与当前页面的 协议://域名（或IP）:端口号都相同时,则满足同源策略称之为同域请求.浏览器可以正确解析返回值请求正常.
如果三者中有一项不同,则把请求称之为叫做跨域请求. 浏览器出于安全性的考虑则不予解析返回值.
在这里插入图片描述
远程请求的流程:

2.2 JSONP
2.2.1 关于JSONP介绍
JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的

2.2.2 JSONP原理说明
1). 利用javaScript标签动态获取远程数据

<script type="text/javascript" src="http://manage.jt.com/test.json"></script>

2).自定义回调函数

<script type="text/javascript">
		/*JS是解释执行的语言  */
		/*定义回调函数  */
		function hello(data){
			alert(data.name);
		}
	</script>

3). 将返回值结果进行特殊格式封装

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

问题: JSONP能否发起POST请求啊?
不能原因: javaScript中的src属性只能发起get请求,不可以用POST.

2.2.3 jQuery中的JSONP
2.2.3.1 编辑页面JS

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSONP测试</title>
<script type="text/javascript" src="http://manage.jt.com/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		alert("测试访问开始!!!!!")
		$.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);
				//转化为字符串使用
				//var obj = eval("("+data+")");
				//alert(obj.name);
			}	
		});	
	})
</script>
</head>
<body>
	<h1>JSON跨域请求测试</h1>
</body>
</html>

2.2.3.2 后台业务实现

package com.jt.web;

import com.fasterxml.jackson.databind.util.JSONPObject;
import com.jt.pojo.ItemDesc;
import com.jt.util.ObjectMapperUtil;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class JSONPController {

    @RequestMapping("/web/testJSONP")
    public JSONPObject testJSONP(String callback){
        ItemDesc itemDesc = new ItemDesc();
        itemDesc.setItemId(100L).setItemDesc("详情信息2222");

        return new JSONPObject(callback, itemDesc);
    }


    /**
     * JSONP请求 返回值要求:  callback(JSON)
     * 1.请求网址:  http://manage.jt.com/web/testJSONP?callback=xxxx
     * 2. 页面取值  itemDesc属性
     */
   /* @RequestMapping("/web/testJSONP")
    public String testJSONP(String callback){
        ItemDesc itemDesc = new ItemDesc();
        itemDesc.setItemId(100L).setItemDesc("详情信息");
        String json = ObjectMapperUtil.toJSON(itemDesc);
        //jsonp步骤3 封装指定的格式
        return callback + "(" + json + ")";
    }*/
}

2.3 CORS
2.3.1 CORS介绍
跨源资源共享 (CORS) （或通俗地译为跨域资源共享）是一种基于HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它origin（域，协议和端口），这样浏览器可以访问加载这些资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的**“预检”**请求。在预检中，浏览器发送的头中标示有HTTP方法和真实请求中会用到的头。
补充: 现阶段几乎所有的浏览器都默认支持CORS(IE除外)

2.3.2 CORS跨域测试
1).修改ajax请求路径

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试JSON跨域问题</title>
<script type="text/javascript" src="http://manage.jt.com/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		$.get("http://manage.jt.com/testCors",function(data){
			alert(data.itemDesc);
		})
	})
</script>
</head>
<body>
	<h1>JSON跨域请求测试</h1>
</body>
</html>

2).跨域报错
在这里插入图片描述
2.3.3 CORS跨域原理
说明: CORS 在响应头中标识哪些网址可以访问服务器.CORS的配置是服务器端的配置和浏览器没关系.

2.3.4 编辑后台Controller

package com.jt.web;

import com.jt.pojo.ItemDesc;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin(value = "http://www.jt.com")   //标识当前Controller中的方法 允许被其他服务器访问
                                         //预检: 在规定时间内同源策略不会再次拦截 提高效率
public class CorsController {

    /**
     * http://manage.jt.com/testCors
     * @return
     */
    @RequestMapping("testCors")
    public ItemDesc cors(){

        return new ItemDesc().setItemDesc("CORS测试");
    }
}

响应头信息:
在这里插入图片描述

2.4 跨域相关说明总结
2.4.1 同域
URL请求地址: http://manage.jt.com:80/test.html
Ajax请求地址: http://manage.jt.com:80/test.json
分析结果: 1.请求协议相同
2.请求域名（IP）相同
3.请求端口号相同

2.4.2 跨域测试
2.4.2.1 服务器页面说明
在这里插入图片描述
2.4.2.2 问题说明
通过上述的请求,是无法获取数据的.
原因:
URL地址: http://www.jt.com:80/test.html
Ajax地址: http://manage.jt.com:80/test.json
问题: 协议相同
域名不同
端口号相同

2.4.3 同源策略
同源策略:
当用户访问页面时并且页面发起Ajax请求时.要求协议://域名:端口号必定相同.
同域访问
如果相同则满足同源策略. 网络可以正常的通讯.
跨域访问
当协议://域名:端口有一条不满足,则该请求为跨域请求. 如果为跨域请求则浏览器不予解析返回值.

2.4.4 关于同源策略总结
执行者: 只有浏览器参与执行,才会有同源的问题…
策略约定: 协议://域名:端口三者缺一不可.
跨域问题发起者: Ajax请求. 如果没有ajax参与不能称之为跨域.
后果: 如果跨域了,则程序依然可以正常的执行.但是客户端拿不到结果的. 出于安全性考虑.浏览器不予解析返回值.
在这里插入图片描述