乐趣区

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

作者：

jiezi

在

京淘前台我的项目搭建

京淘架构图设计

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;

@Configuration
public class MvcConfigurer implements WebMvcConfigurer{

    //开启匹配后缀型配置
    @Override
    public void configurePathMatch(PathMatchConfigurer configurer) {

        configurer.setUseSuffixPatternMatch(true);
    }
}

URL地址小结:

  1. http://www.jt.com/index 该申请会被Controller进行拦挡.
  2. 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;

@RestController
public 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跨域配置: 实现思路在申请的响应头中增加访问信息.
 */
@Configuration
public 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;

@Service
public 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;

@Service
public 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);
    }

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章