关于跨域:分布式电商项目八电商前台跨域问题

京淘前台我的项目搭建

京淘架构图设计

JT-WEB我的项目创立

创立JT-WEB服务器

增加继承/依赖/插件

<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><!--我的项目坐标--><modelVersion>4.0.0</modelVersion><artifactId>jt-web</artifactId><!--应用模板打jar包 不应用模板打war包--><packaging>war</packaging><!--父级工程--><parent><artifactId>jt2007</artifactId><groupId>com.jt</groupId><version>1.0-SNAPSHOT</version></parent><!--增加依赖项--><dependencies><dependency><groupId>com.jt</groupId><artifactId>jt-common</artifactId><version>1.0-SNAPSHOT</version></dependency></dependencies><!--增加maven插件--><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build></project>

导入动态资源文件

阐明:将课前材料中的文件src目录导入到jt-web中

对于主启动类阐明

阐明:jt-web服务器启动时会加载数据源的自动化配置,然而web服务器没有配置数据源,所以报错.

启动类上增加数据源启动.

配置工作目录

域名反向代理

需要: 要求用户通过http://www.jt.com 拜访localhost:8092服务器.

改hosts文件

批改Nginx配置文件

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

批改之后,重启nginx服务器

页面成果展示

谷歌浏览器禁用HTTPS

键入地址:chrome://net-internals/#hsts：

批改实现之后,先清空缓存之后重启浏览器

对于伪动态的阐明

业务阐明

问题1: 京东的商品有很多,如果都采纳动态页面的模式为用户展示数据,如果有100万的商品,那么就须要100万个商品的xxx.html页面. 问:京东是这么做的吗???
实现规定:
应该动静获取商品的ID号.之后查询数据库,而后调整指定的页面,将数据进行填充即可.

问题2: 为什么京东采纳.html结尾的申请展示商品呢?
答案: 采纳.html结尾的页面,更加容易被搜索引擎收录,进步网站的曝光率.

搜索引擎工作原理

工作原理外围: 倒排索引机制. 依据关键字检索文章的地位.

伪动态思维

伪动态是绝对实在动态来讲的，通常咱们为了加强搜索引擎的敌对面，都将文章内容生成动态页面，然而有的敌人为了实时的显示一些信息。或者还想使用动静脚本解决一些问题。不能用动态的形式来展现网站内容。然而这就损失了对搜索引擎的敌对面。怎么样在两者之间找个两头办法呢，这就产生了伪动态技术。伪动态技术是指展现进去的是以html一类的动态页面模式，但其实是用ASP一类的动静脚本来解决的。

开启后缀类型匹配

阐明: 因为京东商城的商品展示时通过

url:https://item.jd.com/10021377498920.html,京东的拜访是依据.html进行拦挡,之后通过restFul构造动静获取商品的ID号,之后查询数据库进行的回显.所以须要对后缀进行拦挡.有了如下的配置.

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

URL地址小结:

http://www.jt.com/index 该申请会被Controller进行拦挡.
http://www.jt.com/index.html 该申请默认条件下示意获取动态资源文件.不会被拦挡.

个别条件下:Controller只拦挡前缀类型的申请. 如果须要拦挡后缀类型的申请须要独自配置.

登录注册页面跳转

实现通用页面跳转

url1: http://www.jt.com/user/login.html 跳转页面 login.jsp
url2: http://www.jt.com/user/register.html 跳转页面 register.jsp

需要: 是否利用一个Controller办法.实现通用页面的跳转?

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 {    /**    * 实现用户登录/注册页面的跳转    * url1：http://www.jt.com/user/register.html    * url2：http://www.jt.com/user/login.html    */    @RequestMapping("/{moduleName}")    public String module(@PathVariable String moduleName){        return moduleName;    }}

跨域

跨域测试

JT-MANAGE后端测试

页面构造

<!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/test.json",function(data){            alert(data.name);        })    })</script></head><body>    <h1>JSON跨域申请测试</h1></body></html>

数据结构

{"id":"1","name":"tom"}

剖析

浏览器URL地址: http://manage.jt.com/test.html
页面AjaxURl地址: http://manage.jt.com/test.json

发现:协定:域名:端口都雷同时,申请能够失常执行

同源策略

规定: 如果浏览器的地址与Ajax的申请地址 协定名称://域名地址:端口号 如果都雷同则满足同源策略.浏览器能够失常的解析返回值. 如果三者之间有一个不同,则违反了同源策略.浏览器不会解析返回值.

什么是跨域

因为业务须要,通常A服务器中的数据可能来源于B服务器. 当浏览器通过网址解析页面时,如果页面外部发动ajax申请.如果浏览器的拜访地址与Ajax拜访地址不满足同源策略时,则称之为跨域申请.
跨域因素:
1.浏览器
2.解析ajax
3.违反了同源策略

JSONP跨域拜访

JSONP介绍

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

JSONP原理阐明

1.利用javaScript中的src属性能够跨域的拜访.

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

2.提前准备一个回调函数 callback()

    /*定义回调函数  */    function hello(data){        alert(data.name);    }

3.将返回值后果进行非凡的格局封装. callback(JSON数据)

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

JSONP高级API

编辑前端WEB页面

<!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>

JSONP页面申请剖析

毫秒数作用: 因为浏览器进行业务申请时可能有缓存操作,所以增加毫秒数,防止浏览器将后果缓存.导致业务异样.

编辑后端服务器

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;@RestControllerpublic class WebJSONPController {    /**     * 实现JSONP跨域拜访     * url地址: http://manage.jt.com/web/testJSONP?callback=hello&_=1605584709377     * 参数:    callback 回调函数的名称     * 返回值:  callback(json)     */    @RequestMapping("/web/testJSONP")    public JSONPObject testJSONP(String callback){        ItemDesc itemDesc = new ItemDesc();        itemDesc.setItemId(1000L).setItemDesc("JSONP近程调用!!!");        JSONPObject jsonpObject = new JSONPObject(callback, itemDesc);        return jsonpObject;    }}

CORS跨域实现

CORS介绍

因为出于平安的思考, 浏览器不容许Ajax调用以后源之外的资源. 即浏览器的同源策略.
CORS须要浏览器和服务器同时反对。目前，所有支流浏览器都反对该性能，IE浏览器不能低于IE10。在浏览器端, 整个CORS通信过程都是浏览器主动实现，在申请之中增加响应头信息,如果服务器容许执行跨域拜访.,则浏览器的同源策略放行.

跨域测验

阐明: 由www.jt.com/test.html拜访页面,之后外部由ajax发动申请. 失去如图的信息.信息中显示,简直所有的浏览器都兼容CORS的形式,然而因为服务器不容许跨域,所以申请被拒.

配置后端服务器

因为跨域需要其余的服务器也会须要跨域.所以在jt-common中增加跨域的配置

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;/** * 实现CORS跨域配置: 实现思路在申请的响应头中增加访问信息. */@Configurationpublic class CORSConfig implements WebMvcConfigurer{//web我的项目的全局配置的接口.    /**     * 参数介绍:     *      1.addMapping()  哪些申请能够进行跨域操作     *        addMapping("/**")   示意所有拜访后端的服务器的申请都容许跨域     *        addMapping("/addUser/**")  示意局部申请能够跨域     *        /*       只能拦挡一级目录     *        /**      能够拦挡多级目录     *     *      2.allowedOrigins("*")  容许哪些网站跨域     *      3.allowCredentials(true)  申请跨域时是否容许携带Cookie/Session相干     * @param registry     */    @Override    public void addCorsMappings(CorsRegistry registry) {        registry.addMapping("/**")                .allowedOrigins("*")                .allowCredentials(true);                //.maxAge();       默认30分钟 是否容许跨域申请 30分钟之内不会再次验证                //.allowedMethods() 容许申请类型    }}

响应信息

对于跨域阐明

1.什么叫跨域浏览器解析Ajax时,发动url申请违反了同源策略时,称之为跨域.
2.什么时候用跨域个别A服务器须要从B服务器中获取数据时,能够采纳跨域的形式.
3.什么是JSONP JSONP是JSON的一种应用模式利用javaScript中的src属性进行跨域申请.(2.自定义回调函数,3.将返回值进行非凡格局封装)
4.什么是CORS CORS是以后实现跨域的支流形式,当初所有的支流浏览器都反对,须要在服务器端配置是否容许跨域的配置. 只有配置了(在响应头中增加容许跨域的标识),则同源策略不失效,则能够实现跨域.

用户数据校验

创立JT-SSO

创立我的项目

增加继承/依赖/插件

<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0"         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">    <modelVersion>4.0.0</modelVersion>    <artifactId>jt-sso</artifactId>    <!--默认打包就是jar包-->    <parent>        <artifactId>jt2007</artifactId>        <groupId>com.jt</groupId>        <version>1.0-SNAPSHOT</version>    </parent>    <!--3.依赖工具API-->    <dependencies>        <dependency>            <groupId>com.jt</groupId>            <artifactId>jt-common</artifactId>            <version>1.0-SNAPSHOT</version>        </dependency>    </dependencies>    <!--4.增加maven插件-->    <build>        <plugins>            <plugin>                <groupId>org.springframework.boot</groupId>                <artifactId>spring-boot-maven-plugin</artifactId>            </plugin>        </plugins>    </build></project>

编辑User POJO对象

@TableName("tb_user")@Data@Accessors(chain = true)public class User extends BasePojo{    @TableId(type = IdType.AUTO)    private Long id;        //主键自增    private String username;    private String password;    //明码    private String phone;       //电话号码    private String email;       //邮箱地址  临时应用电话号码代替}

编辑sso服务器

辑nginx.conf

批改之后,重启nginx即可

实现用户数据校验

页面URL剖析

查问页面JS

剖析页面JS

业务接口文档阐明

编辑JT-SSO UserController

package com.jt.controller;import com.fasterxml.jackson.databind.util.JSONPObject;import com.jt.pojo.User;import com.jt.service.UserService;import com.jt.vo.SysResult;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.PathVariable;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import java.util.List;@RestController@RequestMapping("/user")public class UserController {    @Autowired    private UserService userService;    /**     * 业务需要: 查问所有用户信息     * url:  sso.jt.com   localhost:8093   /findAll     * 返回值: List<User>     */    @RequestMapping("/findAll")    public List<User> findAll(){        return userService.findAll();    }    /**     * 需要:实现用户信息校验     * 校验步骤:  须要接管用户的申请,之后利用RestFul获取数据,     *            实现数据库校验,依照JSONP的形式返回数据.     * url地址:   http://sso.jt.com/user/check/admin123/1?r=0.8&callback=jsonp16     * 参数:      restFul形式获取     * 返回值:    JSONPObject     */    @RequestMapping("/check/{param}/{type}")    public JSONPObject checkUser(@PathVariable String param,                                 @PathVariable Integer type,                                 String callback){        //只须要校验数据库中是否有后果        boolean flag = userService.checkUser(param,type);        SysResult sysResult = SysResult.success(flag);        return new JSONPObject(callback, sysResult);    }}

编辑JT-SSO UserService

package com.jt.service.impl;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;import com.jt.mapper.UserMapper;import com.jt.pojo.User;import com.jt.service.UserService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Service;import java.util.HashMap;import java.util.List;import java.util.Map;@Servicepublic class UserServiceImpl implements UserService {    @Autowired    private UserMapper userMapper;    private static Map<Integer,String> paramMap = new HashMap<>();    static {        paramMap.put(1, "username");        paramMap.put(2, "phone");        paramMap.put(3, "email");    }    @Override    public List<User> findAll() {        return userMapper.selectList(null);    }    /**    * 校验数据库中是否有数据    * Sql：select count(*) from tb_user where username="admin123";    * 要求：返回数据true用户已存在，false用户不存在，能够    * @param param    * @param type    * @return    */    @Override    public boolean checkUser(String param, Integer type) {        //String column = type==1?"username":(type==2?"phone":"email");        //不好，优化成paramMap汇合        String column = paramMap.get(type);        QueryWrapper<User> queryWrapper=new QueryWrapper<>();        queryWrapper.eq(column, param);        int count = userMapper.selectCount(queryWrapper);        return count>0?true:false;    }}

页面成果展示

全局异样解决

编辑页面JS

批改全局异样解决

package com.jt.aop;import com.fasterxml.jackson.databind.util.JSONPObject;import com.jt.vo.SysResult;import org.springframework.util.StringUtils;import org.springframework.web.bind.annotation.ExceptionHandler;import org.springframework.web.bind.annotation.RestControllerAdvice;import javax.servlet.http.HttpServletRequest;@RestControllerAdvice  //定义全局异样解决public class SystemException {    //遇到运行时异样时办法执行.    //JSONP报错 返回值 callback(JSON) 如果申请参数中蕴含callback参数,则标识为跨域申请    @ExceptionHandler({RuntimeException.class})    public Object fail(Exception e, HttpServletRequest request){        e.printStackTrace();    //输入异样信息.        String callback = request.getParameter("callback");        if(StringUtils.isEmpty(callback)){            //如果参数为空示意 不是跨域申请.            return SysResult.fail();        }else{            //有callback参数,示意是跨域申请.            SysResult sysResult = SysResult.fail();            return new JSONPObject(callback,sysResult);        }    }}

HttpClient

业务需要阐明

HttpClient介绍

HTTP 协定可能是当初 Internet 上应用得最多、最重要的协定了，越来越多的 Java 应用程序须要间接通过 HTTP 协定来拜访网络资源。尽管在 JDK 的 java net包中曾经提供了拜访 HTTP 协定的基本功能，然而对于大部分应用程序来说，JDK 库自身提供的性能还不够丰盛和灵便。HttpClient 是 Apache Jakarta Common 下的子项目，用来提供高效的、最新的、功能丰富的反对 HTTP 协定的客户端编程工具包，并且它反对 HTTP 协定最新的版本和倡议。HttpClient 曾经利用在很多的我的项目中，比方 Apache Jakarta 上很驰名的另外两个开源我的项目 Cactus 和 HTMLUnit 都应用了 HttpClient。当初HttpClient最新版本为 HttpClient 4.5 .6（2015-09-11）

HttpClient入门案例

导入jar包

 <!--增加httpClient jar包 -->        <dependency>            <groupId>org.apache.httpcomponents</groupId>            <artifactId>httpclient</artifactId>        </dependency>

HttpClient入门案例

package com.jt.test;import com.sun.scenario.effect.impl.sw.sse.SSEBlend_SRC_OUTPeer;import org.apache.http.HttpEntity;import org.apache.http.HttpResponse;import org.apache.http.client.HttpClient;import org.apache.http.client.methods.HttpGet;import org.apache.http.impl.client.CloseableHttpClient;import org.apache.http.impl.client.HttpClients;import org.apache.http.util.EntityUtils;import org.junit.jupiter.api.Test;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.boot.test.context.SpringBootTest;import java.io.IOException;//@SpringBootTest   //从spring容器中获取bean对象,之后实现测试业务.public class TestHttpClient {    /**     * 1.实例化HttpClient对象     * 2.定义近程拜访的url地址     * 3.定义申请类型的对象     * 4.发动http申请,获取响应的后果     * 5.对返回值后果进行校验.获取实在的数据信息.     * */    @Test    public void testGet() throws IOException {       HttpClient httpClient = HttpClients.createDefault();       String url = "http://www.baidu.com";       HttpGet httpGet = new HttpGet(url);       HttpResponse httpResponse = httpClient.execute(httpGet);       //常见后果状态 200 404 406参数异样  500后端服务器异样 504超时  502拜访的网址不存在        //获取状态码        int status = httpResponse.getStatusLine().getStatusCode();        if(status == 200){            //获取响应后果            HttpEntity entity = httpResponse.getEntity();            String result = EntityUtils.toString(entity,"UTF-8");            System.out.println(result);        }    }}

HttpClient实现业务逻辑

业务需要

用户通过http://www.jt.com/user/testHt...
JT-WEB服务器拜访JT-SSO时的申请http://sso.jt.com/user/testHt...

编辑前端Controller

    /**    * 需要： 获取userList汇合 并将其中的邮箱信息改为电话号码    * url: http://www.jt.com/user/testHttpClient    * 返回值：List<User>    */    @RequestMapping("/testHttpClient")    @ResponseBody    public List<User> testHttpClient(){        return userService.testHttpClient();    }

编辑前端Service

package com.jt.service;import com.jt.pojo.User;import com.jt.util.ObjectMapperUtil;import org.apache.http.HttpEntity;import org.apache.http.HttpResponse;import org.apache.http.client.HttpClient;import org.apache.http.client.methods.HttpGet;import org.apache.http.impl.client.HttpClients;import org.apache.http.util.EntityUtils;import org.springframework.stereotype.Service;import java.io.IOException;import java.util.ArrayList;import java.util.Date;import java.util.LinkedHashMap;import java.util.List;@Servicepublic class UserServiceImpl implements UserService{    @Override    public List<User> testHttpClient() {        List userList = new ArrayList<>();        //由jt-web服务器去链接jt-sso的服务器        String url = "http://sso.jt.com/user/testHttpClient";        HttpClient httpClient = HttpClients.createDefault();        HttpGet httpGet = new HttpGet(url);        try {            HttpResponse httpResponse =httpClient.execute(httpGet);            if(httpResponse.getStatusLine().getStatusCode() == 200){            HttpEntity httpEntity = httpResponse.getEntity();            String result = EntityUtils.toString(httpEntity, "UTF-8");            userList = ObjectMapperUtil.toObject(result, userList.getClass());           /* for (LinkedHashMap<String,Object> map : userList){                    User userTemp = new User();                    userTemp.setId( Long.parseLong(map.get("id")+""));                    userTemp.setUsername((String)map.get("username"));                    userTemp.setPassword((String)map.get("password"));                    userTemp.setPhone((String)map.get("phone"));                    userTemp.setEmail((String)map.get("phone"));                    userList2.add(userTemp);                }*/            }        } catch (IOException e) {            e.printStackTrace();            throw new RuntimeException(e);        }        return userList;    }}

编辑后端Controller

 /**     * http://sso.jt.com/user/testHttpClient     * 返回List<User>     */    @RequestMapping("testHttpClient")    public List<User> testHttpClient(){        return userService.findAll();    }

编辑后端Service

 @Override    public List<User> findAll() {        return userMapper.selectList(null);    }