跨域常用配置总结

1.关于谷歌禁用https的说明

说明: 个别浏览器出于安全性考虑,将http请求协议,自动的转化为https的协议规范.
解决方案: 需要让谷歌浏览器禁用HTTPS.
命令: chrome://net-internals/#hsts
在这里插入图片描述

2.开启后缀类型匹配说明

2.1.业务说明

说明:当用户在访问index.html时会去找webapp目录下的index.html页面. 如果将来的商品信息较多,.则必然准备多个商品的xxxx.html/.这样的工作量太大.
优化: 拦截用户的请求,转向到指定的模板页面中,之后实现数据的填充.
在这里插入图片描述

2.2.编辑配置类

说明: 默认条件下 springMVC只能拦截/index等前缀型请求. 如果访问/index.html则访问的是具体的页面. 所以需要让springMVC拦截后缀型请求.,实现商品列表的跳转.
在这里插入图片描述

2.3.搜索引擎工作原理

说明: 一般搜索引擎只记录.html结尾的静态页面. 搜索引擎记录之后,如果用户通过检索的方式查找信息时,搜索引擎会将网站推送给用户,增加网站的曝光率!

核心机制: 倒排索引
在这里插入图片描述

2.4.伪静态说明

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

3.跨域实现

3.1.JSONP方式

3.1.1JSONP说明

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

3.1.2 JSONP原理说明

步骤:
1).利用javaScript中的src属性实现远程数据的获取获取的数据是一个JS对象由浏览器负责解析JS.

<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).将返回值结果,经过特殊的格式封装.

3.1.3 JSONP优化

1).函数名称应该动态传递过去的.
2).能否利用常规的ajax实现JSONP调用.
3).能否动态生成一个回调函数.

3.1.4 JSONP实现入门案例

在这里插入图片描述

3.1.5.编辑JSONPController

说明:在JT-MANAGE中定义JSONPController 在这里插入图片描述

3.1.5JSONP 高级API(二)

在这里插入图片描述

3.2.跨域实现-CORS方式

3.2.1. CORS介绍

跨域资源共享（英语：Cross-origin resource sharing，缩写：CORS），用于让网页的受限资源能够被其他域名的页面访问的一种机制。(实现跨域),CORS通过在响应头中标识允许跨域的网址.之后同源策略基于安全性的规范予以放行的一种跨域访问方式.
说明:需要在服务器中添加允许访问的标识即可.

通过该机制，页面能够自由地使用不同源（英语：cross-origin）的图片、样式、脚本、iframes以及视频。一些跨域的请求（特别是Ajax）常常会被同源策略（英语：Same-origin policy）所禁止的。跨源资源共享定义了一种方式，为的是浏览器和服务器之间能互相确认是否足够安全以至于能使用跨源请求（英语：cross-origin requests）。比起纯粹的同源请求，这将更为自由和功能性的（functionality ），但比纯粹的跨源请求更为安全。
跨域资源共享是一份浏览器技术的规范，提供了 Web 服务从不同网域传来沙盒脚本的方法，以避开浏览器的同源策略

3.2.2 编辑CORS配置类

@Configuration
public class CORSConfig implements WebMvcConfigurer {
    
    

    /**
     *   添加资源共享的策略
     *   参数说明:
     *      1.addMapping()  什么样的请求允许跨域
     *      2.allowedOrigins()  设定允许访问的网址
     *      3.allowCredentials() 是否允许携带cookie
     *
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
    
    
        registry.addMapping("/**")
                .allowedOrigins("*")
                //如果设置true时,则必须设定允许访问的网址,不可以用*号标识.
                .allowCredentials(false);
                //.maxAge()       30分钟
                //.allowedMethods("*")  GET POST  HEAD
    }
}

3.2.3 页面效果访问

在这里插入图片描述