SpringBoot part4 day14

最新推荐文章于 2020-12-16 09:07:59 发布

weixin_47562812

最新推荐文章于 2020-12-16 09:07:59 发布

阅读量127

点赞数

分类专栏： springboot 文章标签： java spring ajax跨域问题

本文链接：https://blog.csdn.net/weixin_47562812/article/details/111029128

版权

springboot 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

1 京淘项目前后端搭建策略

**在这里插入图片描述**

2 京淘前台项目的创建

2.1创建项目

2.1.1创建maven项目
在这里插入图片描述

2.2.2添加继承/依赖插件

 <!--添加打包方式-->
    <packaging>war</packaging>
    <!--添加依赖-->
    <dependencies>
        <dependency>
            <groupId>com.jt</groupId>
            <artifactId>jt-common</artifactId>
            <version>1.0-SNAPSHOT</version>
        </dependency>

    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

2.2.3复制资源
删除原有的src，粘贴新的src文件
项目结构
在这里插入图片描述

2.2.4 结构说明
前端服务器直接访问后端服务器，所以不需要添加数据库配置
在这里插入图片描述

package com.jt;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration;

@SpringBootApplication(exclude=DataSourceAutoConfiguration.class)//(exclude=DataSourceAutoConfiguration.class)  不需要加载jdbc
public class SpringBootRun {
	
	public static void main(String[] args) {
		
		SpringApplication.run(SpringBootRun.class,args);
	}
}

父类中由jdbc的包，子类加载的时候自动加载父类资源，开箱即用，所以需要告诉程序不需要加载jdbc资源
在这里插入图片描述

2.2.5 配置工作目录
在这里插入图片描述
2.2.6测试界面

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

在这里插入图片描述

2.3开启后缀类型匹配

2.3.1业务说明
说明:当用户在访问index.html时会去找webapp目录下的index.html页面. 如果将来的商品信息较多,.则必然准备多个商品的xxxx.html/.这样的工作量太大.
优化: 拦截用户的请求,转向到指定的模板页面中,之后实现数据的填充.
在这里插入图片描述
2.3.2编辑配置类
说明: 默认条件下 springMVC只能拦截/index等前缀型请求. 如果访问/index.html则访问的是具体的页面. 所以需要让springMVC拦截后缀型请求.,实现商品列表的跳转.

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{
	
	//开启匹配后缀型配置
	@Override
	public void configurePathMatch(PathMatchConfigurer configurer) {
		
		configurer.setUseSuffixPatternMatch(true);
	}
}

package com.jt.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import java.lang.annotation.Retention;

@Controller
public class PageController {
    @RequestMapping("/index")
    public String doIndexUI(){
        return "index";
    }

}

在这里插入图片描述
2.3.3搜索引擎工作原理
说明: 一般搜索引擎只记录.html结尾的静态页面. 搜索引擎记录之后,如果用户通过检索的方式查找信息时,搜索引擎会将网站推送给用户,增加网站的曝光率!

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

2.4 实现动态页面跳转

2.4.1 编辑UserController
在这里插入图片描述

package com.jt.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/user")
public class UserController {


    @RequestMapping("/{moduleName}")
    public String moduleName(@PathVariable String moduleName){

      return moduleName;

    }




}

在这里插入图片描述

配置前台服务器域名代理
 server {
     listen 80;
     server_name www.jt.com;
     location / {
        proxy_pass http://localhost:8092;
     }
    }

之后重启nginx

nginx -s reload

修改host文件
在这里插入图片描述

2.4.2编写pojo

package com.jt.pojo;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import lombok.experimental.Accessors;

@TableName("tb_user")
@Data
@Accessors(chain = true)
public class User extends BasePojo{
    @TableId(type = IdType.AUTO)
    private Long id;          //ID
    private String username;  //用户名
    private String password;  //密码
    private String phone;    //电话
    private String email;   //暂时用电话代替

}

3 跨域问题说明

3.1 跨域现象说明

3.1.1 本地测试
页面url地址: http://manage.jt.com:80/test.html
Ajax网址: http://manage.jt.com:80/test.json
该组合可以实现业务的调用.
协议://域名:80端口
在这里插入图片描述

3.1.2 远程测试

页面url地址: http://www.jt.com/test.html
Ajax网址: http://manage.jt.com/test.json
结果: 请求不能正常的获取返回值结果.

报错信息:
在这里插入图片描述
3.1.3同源策略
说明: 浏览器规定用户访问的域名与该域名中展现的页面中的ajax请求,必须满足如下的条件时,才能访问成功.
条件:
1).协议规则 http/https/tcp-ip
2).域名地址 www.jt.com/manage.jt.com
3).端口号: 80/8081/8091…
要求全部相同.
名词:
1).满足同源策略的规定,称之为同域访问.
2).不满足同源策略规定,称之为跨域访问.

在这里插入图片描述

3.1.3 什么是跨域访问
说明: **浏览器(解析页面地址)**在解析(页面发起ajax)Ajax请求时,由于违法了同源策略,则把该访问称之为跨域访问.
在这里插入图片描述

3.2跨域实现——JSONP方式

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

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

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

在这里插入图片描述
2).自定义回调函数.

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

3).将返回值结果,经过特殊的格式封装.
在这里插入图片描述

3.3JSONP的优化

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

3.4JSONP入门案例

在这里插入图片描述
type只能是get,是因为jsonp借助于script的src请求，但是src请求就是get请求

jquery争对于jsonp调用封装的API

<script type="text/javascript">
	$(function(){
		alert("测试访问开始!!!!!")
		$.ajax({
			url:"http://manager.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>

在这里插入图片描述
后面加上随机数，这样是为了避免缓存的影响，每次生成随机数，对于浏览器都是新请求
3.4.1编辑页面js

在这里插入图片描述
3.4.2检查URL请求

3.4.3编辑JSONPController
说明:在JT-MANAGE中定义JSONPController

package com.jt.web.controller;

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 {
    /**
     * 完成JSONP跨域访问
     * url地址：Request URL: http://manager.jt.com/web/testJSONP?callback=jQuery1111010673972627971273_1607672136827&_=1607672136828
     * 参数：callback=JQUXXXXX;
     * 返回值：callback(JSON)
     *
     */
    @RequestMapping("/web/testJSONP")
   public String jsonp(String callback){
       ItemDesc itemDesc=new ItemDesc();
       itemDesc.setItemId(101L).setItemDesc("跨域访问");
       String json= ObjectMapperUtil.toJSON(itemDesc);
       return callback+"("+json+")";

   }

}

JSONP.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSONP测试</title>
<script type="text/javascript" src="http://manager.jt.com/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		alert("测试访问开始!!!!!")
		$.ajax({
			url:"http://manager.jt.com/web/testJSONP",
			type:"get",				//jsonp只能支持get请求
			dataType:"jsonp",       //dataType表示返回值类型
			jsonp: "callback",    //指定参数名称
			jsonpCallback: "hello",  //指定回调函数名称
			success:function (data){   //data经过jQuery封装返回就是json串
				alert(data.itemId);
				alert(data.itemDesc);
				//转化为字符串使用
				//var obj = eval("("+data+")");
				//alert(obj.name);
			}	
		});	
	})
</script>
</head>
<body>
	<h1>JSON跨域请求测试</h1>
</body>
</html>

3.4.4JSONP数据返回形式
在这里插入图片描述

JSONP 高级API(二)

在这里插入图片描述

3.5跨域实现—CORS方式

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

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

3.5.2编辑CORS配置类

package com.jt.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class CORSConfig implements WebMvcConfigurer {
      /**
     *   添加资源共享的策略
     *   参数说明:
     *      1.addMapping()  什么样的请求允许跨域
     *      2.allowedOrigins()  设定允许访问的网址
     *      3.allowCredentials() 是否允许携带cookie
     *
     */
    @Override
    public void addCorsMappings(CorsRegistry registry){
     registry.addMapping("/**")
              .allowedOrigins("*")//  * 是允许所有
      //  .allowedOrigins("http://www.jt1.com","http://www.jt.com");
             //.allowedOrigins("http://www.jt1.com"）只允许这个访问
         //     .allowedMethods("*")  允许所有  get post head
        //   .allowedMethods("get")   只允许get方式
            //  .allowCredentials(true) //允许cookie信息 设置true时必须设定允许访问的网址（http://www.jt1.com），不能用*代替
         // .maxAge()    允许跨域的时常，默认30分钟
             ;

    }

}

cors.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试JSON跨域问题</title>
<script type="text/javascript" src="http://manager.jt.com/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript">
	/*$(){}结构必然是jQuery函数类库导入后才能正确执行*/
	$(function(){
		alert("跨域访问测试开始");
		//利用jQuery发起AJAX请求
		$.get("http://manager.jt.com/cors.json",function(data){
			alert(data.name);
		})
	})
</script>
</head>
<body>
	<h1>JSON跨域请求测试</h1>
</body>
</html>