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

52次阅读

共计 14793 个字符，预计需要花费 37 分钟才能阅读完成。

京淘前台我的项目搭建

京淘架构图设计

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);
    }

正文完
跨域
发表至： 跨域
2020-11-29
 0
关于跨域:后端工程师的跨域之旅
关于跨域:SharedArrayBuffer-及其跨域下的使用
关于跨域:前端微服务跨域配置解决办法devServer为例
关于跨域:前后端解决跨域问题