leyou商城day2

1.返回状态码 1.在com.leyou.item.controller跟com.leyou.item.service下创建测试类

package com.leyou.item.controller;

import com.leyou.item.service.ItemService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class ItemController {
    @Autowired
    private ItemService itemService;

    @PostMapping("/save")
    public Long saveItem(@RequestParam("id") Long id){
        return itemService.saveItem(id);
    }
}

 

package com.leyou.item.service;

import org.springframework.stereotype.Service;

@Service
public class ItemService {
    public Long saveItem(Long id){
        // 模拟添加 *** 作，如果id为1抛异常
        if(id.equals(1L)){
            throw new RuntimeException("Id不能为1！");
        }
        return id;
    }
}

2.在tools工具栏Httptest下模拟请求

 成功

 失败

经过测试，我们发现，在正常情况下只能返回200状态码，在异常情况下只能返回500状态码。显然这不满足我们的需求！

这里我们用springMVC自带的提供的状态码来给前端返回相应的状态码。

修改代码

 可以自己用固定的status值也可以使用里边自带的

 

 3.模拟失败返回状态码及失败信息，不需要多余的东西 3.1在commom模块下定义一个LyException类来抛出自定义异常

3.2改造ly-item-service

测试发现状态没有效果，可以明白，spring并不认识我们的LyException，它依然把LyException当成了来RuntimeException处理了。所以我们要在common模块中自定义拦截异常的处理器类。

 4.全局异常拦截器 4.1在common下的excepiton包下创建全局异常类

 

编写重启之后测试发现。但是，虽然我们要的信息都有了，但是返回的异常信息太多太多，很多都是框架的信息，前端根本用不到这些信息，如果我们将这些信息返回，那么响应的数据多了，一定程度上响应了数据的响应速度，所以我们需要进一步优化。

4.2编写自定义异常处理类

为了让异常结果更友好，我们不在LyExceptionController返回LyException，而是自定义一个响应的类，这个类只包含异常响应的结果。

提供返回异常信息的自定义类

4.3在common.exception.pojo下创建返回类型

 4.4改造LyExceptionController

 重启之后测试，到这一步，我们的全局异常问题已经解决了，要的响应码和响应内容都是我们自定义的了。

5.自定义返回类型枚举类

因为现在的异常响应信息包含多个内容，所以只用字符串就很难满足我们的需求，所以我们需要定义一个类来装这些信息，但是异常信息其实都是提前约定好的，所以用枚举比较符合我们需求。

枚举：把一件事情的所有可能性列举出来。在计算机中，枚举也可以叫多例，单例是多例的一种情况 。

单例：一个类只能有一个实例。

多例：一个类只能有有限个数的实例。

单例的实现：

• 私有化构造函数

• 在成员变量中初始化本类对象

• 对外提供静态方法，访问这个对象

5.1在common.exception.pojo下创建返回枚举类

package com.leyou.commom.exception.pojo;

import lombok.Getter;

/**
 * 返回枚举类
 * @author yy
 */

@Getter
public enum ResultCode {
    INVALID_FILE_TYPE(400, "无效的文件类型！"),
    INVALID_PARAM_ERROR(400, "无效的请求参数！"),
    INVALID_PHONE_NUMBER(400, "无效的手机号码"),
    INVALID_VERIFY_CODE(400, "验证码错误！"),
    INVALID_USERNAME_PASSWORD(400, "无效的用户名和密码！"),
    INVALID_SERVER_ID_SECRET(400, "无效的服务id和密钥！"),
    INVALID_NOTIFY_PARAM(400, "回调参数有误！"),
    INVALID_NOTIFY_SIGN(400, "回调签名有误！"),

    CATEGORY_NOT_FOUND(404, "商品分类不存在！"),
    BRAND_NOT_FOUND(404, "品牌不存在！"),
    SPEC_NOT_FOUND(404, "规格不存在！"),
    GOODS_NOT_FOUND(404, "商品不存在！"),
    CARTS_NOT_FOUND(404, "购物车不存在！"),
    APPLICATION_NOT_FOUND(404, "应用不存在！"),
    ORDER_NOT_FOUND(404, "订单不存在！"),
    ORDER_DETAIL_NOT_FOUND(404, "订单数据不存在！"),

    DATA_TRANSFER_ERROR(500, "数据转换异常！"),
    INSERT_OPERATION_FAIL(500, "新增 *** 作失败！"),
    UPDATE_OPERATION_FAIL(500, "更新 *** 作失败！"),
    DELETE_OPERATION_FAIL(500, "删除 *** 作失败！"),
    FILE_UPLOAD_ERROR(500, "文件上传失败！"),
    DIRECTORY_WRITER_ERROR(500, "目录写入失败！"),
    FILE_WRITER_ERROR(500, "文件写入失败！"),
    SEND_MESSAGE_ERROR(500, "短信发送失败！"),
    INVALID_ORDER_STATUS(500, "订单状态不正确！"),
    STOCK_NOT_ENOUGH_ERROR(500, "库存不足！"),

    UNAUTHORIZED(401, "登录失效或未登录！");

    private int status;
    private String message;

    ResultCode(int status, String message) {
        this.status = status;
        this.message = message;
    }
}

5.2改造LyException

测试

6.域名解析问题 6.1统一环境

我们现在访问页面使用的是：http://localhost:8081

有没有什么问题？

实际开发中，会有不同的环境：

• 开发环境：自己的电脑

• 测试环境：提供给测试人员使用的环境

• 预发布环境：数据是和生成环境的数据一致，运行最新的项目代码进去测试

• 生产环境：项目最终发布上线的环境

如果不同环境使用不同的ip去访问，可能会出现一些问题。为了保证所有环境的一致，我们会在各种环境下都使用域名来访问。

我们将使用以下域名：

• 主域名是：www.leyou.com，

• 管理系统域名：manage.leyou.com

• 网关域名：api.leyou.com

• ...

但是最终，我们希望这些域名指向的还是我们本机的某个端口。

那么，当我们在浏览器输入一个域名时，浏览器是如何找到对应服务的ip和端口的呢？

域名要访问，先从==浏览器缓存==中解析，然后从==本地host文件==解析，最后去==域名根服务器==解析域名。

6.2域名解析

一个域名一定会被解析为一个或多个ip。这一般会包含两步：本地host和万网两步，如果任何一步解析成功了，就不会继续往下解析了。

• 本地域名解析

  浏览器会首先在本机的hosts文件中查找域名映射的IP地址，如果查找到就返回IP ，没找到则进行域名服务器解析，一般本地解析都会失败，因为默认这个文件是空的。

  • Windows下的hosts文件地址：C:\Windows\System32\drivers\etc

  • Linux下的hosts文件所在路径： /etc/hosts

• 域名服务器解析

  本地解析失败，才会进行域名服务器解析，域名服务器就是网络中的一台计算机，里面记录了所有注册备案的域名和ip映射关系，一般只要域名是正确的，并且备案通过，一定能找到。

6.3解决域名解析问题

我们不可能去购买一个域名，因此我们可以伪造本地的hosts文件，实现对域名的解析。修改本地的host为：

- 127.0.0.1 api.leyou.com           ：我们的网关Zuul
- 127.0.0.1 manage.leyou.com  ：我们的后台系统地址
- 127.0.0.1 www.leyou.com        : 这个是网站主页
- 127.0.0.1 image.leyou.com      : 这个是图片地址

现在，ping一下域名试试是否畅通：

 7.nginx  7.1什么是Nginx

nginx可以作为web服务器，但更多的时候，我们把它作为网关，因为它具备网关必备的功能：

• 反向代理

• 负载均衡

• 动态路由

• 请求过滤

总结NGINX有两大核心功能：第一，可以做为静态资源服务器来使用，并发和性能远高于tomcat。第二个功能就是做反向代理服务器。

7.2Nginx作为web服务器

Web服务器分2类：

• web应用服务器（动态服务器），如：

  • tomcat

  • resin

  • jetty

• web服务器（静态服务器），如：

  • Apache 服务器（.httpaccess）

  • Nginx

  • IIS

区分：web服务器不能解析jsp等页面，只能处理js、css、html等静态资源。 并发：web服务器的并发能力远高于web应用服务器。

7.3Nginx作为反向代理

什么是反向代理？

• 代理：通过客户机的配置，实现让一台服务器代理客户机，客户的所有请求都交给代理服务器处理。

• 反向代理：用一台服务器，代理真实服务器，用户访问时，不再是访问真实服务器，而是代理服务器。

nginx可以当做反向代理服务器来使用：

• 我们需要提前在nginx中配置好反向代理的规则，不同的请求，交给不同的真实服务器处理

• 当请求到达nginx，nginx会根据已经定义的规则进行请求的转发，从而实现路由功能

利用反向代理，就可以解决我们前面所说的端口问题，如图

如果是安装在本机：

正向代理即是客户端代理, 代理客户端，服务端不知道实际发起请求的客户端 。VPN

反向代理即是服务端代理, 代理服务端，客户端不知道实际提供服务的服务端。

7.4下载安装

可以参考https://blog.csdn.net/gugugubird/article/details/120451618?spm=1001.2014.3001.5501

7.5配置nginx

 为了看起来清爽，我们先在nginx主配置文件nginx.conf中使用include指令引用我们的配置：

	include vhost/*.conf;

然后在nginx.conf所在目录新建文件夹vhost,并在vhost中创建文件leyou.conf

upstream leyou-manage{
	server	127.0.0.1:9001;
}
upstream leyou-gateway{
	server	127.0.0.1:10010;
}
upstream leyou-portal{
	server	127.0.0.1:9002;
}

server {
	listen       80;
	server_name  manage.leyou.com;
	
	location / {
	    proxy_pass   http://leyou-manage;
		proxy_connect_timeout 600;
		proxy_read_timeout 5000;
	}
}
server {
	listen       80;
	server_name  www.leyou.com;
	
	location / {
	    proxy_pass   http://leyou-portal;
		proxy_connect_timeout 600;
		proxy_read_timeout 5000;
	}
}
server {
	listen       80;
	server_name  api.leyou.com;
	
	location / {
	    proxy_pass   http://leyou-gateway;
		proxy_connect_timeout 600;
		proxy_read_timeout 5000;
	}
}

解读：

• upstream：定义一个负载均衡集群，例如leyou-manage

  • server：集群中某个节点的ip和port信息，可以配置多个，实现负载均衡，默认轮询

• server：定义一个监听服务配置

  • listen：监听的断开

  • server_name：监听的域名

  • location：匹配当前域名下的哪个路径。例如：/，代表的是一切路径

    • proxy_pass：监听并匹配成功后，反向代理的目的地，可以指向某个ip和port，或者指向upstream定义的负载均衡集群，nginx反向代理时会轮询中服务列表中选择。

测试，重载nginx，然后用域名访问后台管理系统：

8.表关系分析：商品-分类-品牌

• 一个商品分类下有很多商品

• 一个商品分类下有很多品牌

• 而一个品牌，可能属于不同的分类

• 一个品牌下也会有很多商品

因此，我们需要依次去完成：商品分类、品牌、商品规格、商品的开发。

9.商品分类 9.1页面分析

首先我们看下要实现的效果：  

商品分类之间是会有层级关系的，采用树结构去展示是最直观的方式。

一起来看页面，对应的是/pages/item/Category.vue：

页面模版

 v-card：卡片，是vuetify中提供的组件，提供一个悬浮效果的面板，一般用来展示一组数据。

 v-flex：布局容器，用来控制响应式布局。与BootStrap的栅格系统类似，整个屏幕被分为12格。我们可以控制所占的格数来控制宽度：

• 本例中，我们用sm10控制在小屏幕及以上时，显示宽度为10格

• v-tree：树组件。Vuetify并没有提供树组件，这个是我们自己编写的自定义组件：

9.2树组件用法 

这里推荐使用url进行延迟加载，每当点击父节点时，就会发起请求，根据父节点id查询子节点信息。

当有treeData属性时，就不会触发url加载

远程请求返回的结果格式：

[
    { 
        "id": 74,
        "name": "手机",
        "parentId": 0,
        "isParent": true,
        "sort": 2
	},
     { 
        "id": 75,
        "name": "家用电器",
        "parentId": 0,
        "isParent": true,
        "sort": 3
	}
]

 

完整的node信息：

回调函数中返回完整的node节点会包含以下数据：  

{
    "id": 76, // 节点id
    "name": "手机", // 节点名称
    "parentId": 75, // 父节点id
    "isParent": false, // 是否是父节点
    "sort": 1, // 顺序
    "path": ["手机", "手机通讯", "手机"] // 所有父节点的名称数组
}

9.3树组件与后台的交互

给大家的页面中已经配置了url，我们刷新页面看看会发生什么：

页面发起了一条请求：http://api.leyou.com/api/item/category/of/parent?pid=0

大家可能会觉得很奇怪，我们明明是使用的相对路径，讲道理发起的请求地址应该是：

http://manage.leyou.com/item/category/of/parent

但实际却是：

http://api.leyou.com/api/item/category/of/parent?pid=0

这是因为，我们有一个全局的配置文件，对所有的请求路径进行了约定：

路径是http://api.leyou.com/api，因此页面发起的一切请求都会以这个路径为前缀。

而我们的Nginx又完成了反向代理，将这个地址代理到了http://127.0.0.1:10010，也就是我们的Gateway网关，最终再被Gateway转到微服务，由微服务来完成请求处理并返回结果。

10.商品分类：使用Axios与微服务交互

axios官网：GitHub - axios/axios: Promise based HTTP client for the browser and node.js

10.1引入axios

package.json引入依赖：

在js文件中引入：

 10.2get请求

//第一种：可以把参数直接写到url的?后面
axios.get('/user?ID=12345')
  .then(function (response) {
    // 成功执行
    console.log(response);
  })
  .catch(function (error) {
    // 失败执行
    console.log(error);
  })
  .finally(function () {
    // 总是执行
  });




// 第二种：get请求传参也可以使用下面这种方式
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    //成功执行
    console.log(response);
  })
  .catch(function (error) {
    //失败执行
    console.log(error);
  })
  .finally(function () {
    //总是执行
  });  

 10.3post请求

//post请求
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    //成功执行
    console.log(response);
  })
  .catch(function (error) {
    //失败执行
    console.log(error);
  });

10.4设置baseURL地址

baseURL就是一个基本url地址，所有请求都会先拼接上baseURL。

10.5把axios加入vue的全局属性中

以后我们会有很多个vue页面，每个页面如果都引入axios，那很麻烦，我们想要的是一次引入多次使用，怎么实现？

我们可以在Vue中加入一个我们自定义的属性，然后调用即可，怎么在一个js对象中加入一个自定义属性呢？靠的是js的prototype属性。

 

然后在vue页面中就可以直接调用了：  

11.后台代码装备工作 11.1用逆向工程生成基本代码

在item模块下加上依赖并且逆向工程生成代码

        
        
            com.baomidou
            mybatis-plus-generator
            3.4.1
        
        
            com.baomidou
            mybatis-plus-extension
            3.4.1
        
        
        
            org.apache.velocity
            velocity-engine-core
            2.2
        

 

import com.baomidou.mybatisplus.core.exceptions.MybatisPlusException;
import com.baomidou.mybatisplus.core.toolkit.StringPool;
import com.baomidou.mybatisplus.core.toolkit.StringUtils;
import com.baomidou.mybatisplus.generator.AutoGenerator;
import com.baomidou.mybatisplus.generator.InjectionConfig;
import com.baomidou.mybatisplus.generator.config.*;
import com.baomidou.mybatisplus.generator.config.po.TableInfo;
import com.baomidou.mybatisplus.generator.config.rules.NamingStrategy;
import com.baomidou.mybatisplus.generator.engine.VelocityTemplateEngine;

import java.util.ArrayList;
import java.util.List;
import java.util.Scanner;

public class CodeGenerator {
    /**
     * 

     * 读取控制台内容
     * 
     */
    public static String scanner(String tip) {
        Scanner scanner = new Scanner(System.in);
        System.out.println("请输入" + tip + "：");
        if (scanner.hasNext()) {
            String ipt = scanner.next();
            if (StringUtils.isNotBlank(ipt)) {
                return ipt;
            }
        }
        throw new MybatisPlusException("请输入正确的" + tip + "！");
    }

    public static void main(String[] args) {
        String hostUri = "jdbc:mysql://localhost:3306/leyou?allowMultiQueries=true&useUnicode=true&characterEncoding=UTF-8&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=GMT%2B8";
        String userName = "root";
        String passWord = "root";
        String author = "yy";

        // 代码生成器
        AutoGenerator mpg = new AutoGenerator();

        // 全局配置
        GlobalConfig gc = new GlobalConfig();
        String projectPath = System.getProperty("user.dir");
        gc.setOutputDir(projectPath + "/ly-item/src/main/java");
        gc.setAuthor(author);
        gc.setOpen(false);
        // 设置名字
        gc.setControllerName("%sController");
        gc.setServiceName("%sService");
        gc.setServiceImplName("%sServiceImpl");
        gc.setMapperName("%sMapper");
        gc.setXmlName("%sMapper");
        // 设置 resultMap
        gc.setBaseResultMap(true);
        gc.setBaseColumnList(true);
//        gc.setFileOverride(true);
        // gc.setSwagger2(true); 实体属性 Swagger2 注解
        mpg.setGlobalConfig(gc);

        // 数据源配置
        DataSourceConfig dsc = new DataSourceConfig();
        dsc.setUrl(hostUri);
        dsc.setDriverName("com.mysql.cj.jdbc.Driver");
        dsc.setUsername(userName);
        dsc.setPassword(passWord);
        mpg.setDataSource(dsc);

        // 自定义配置
        InjectionConfig cfg = new InjectionConfig() {
            @Override
            public void initMap() {
                // to do nothing
            }
        };

        // 包配置
        PackageConfig pc = new PackageConfig();
        //  pc.setModuleName(scanner("模块名"));
        pc.setParent("com.leyou.item");
        pc.setMapper("mapper");
        mpg.setPackageInfo(pc);

        // 如果模板引擎是 velocity
        String templatePath = "/templates/mapper.xml.vm";

        // 自定义输出配置
        List focList = new ArrayList<>();
        // 自定义配置会被优先输出
        focList.add(new FileOutConfig(templatePath) {
            @Override
            public String outputFile(TableInfo tableInfo) {
                // 自定义输出文件名 ， 如果你 Entity 设置了前后缀、此处注意 xml 的名称会跟着发生变化！！
                return projectPath + "/ly-item/src/main/resources/mapper/" + pc.getModuleName()
                        + "/" + tableInfo.getEntityName() + "Mapper" + StringPool.DOT_XML;
            }
        });
        cfg.setFileOutConfigList(focList);
        mpg.setCfg(cfg);

        // 配置模板
        TemplateConfig templateConfig = new TemplateConfig();

        templateConfig.setXml(null);
        mpg.setTemplate(templateConfig);

        // 策略配置
        StrategyConfig strategy = new StrategyConfig();
        strategy.setNaming(NamingStrategy.underline_to_camel);
        strategy.setColumnNaming(NamingStrategy.underline_to_camel);
        strategy.setEntityLombokModel(true);
        strategy.setRestControllerStyle(true);
        // 写于父类中的公共字段
//        strategy.setSuperEntityColumns("id");
        strategy.setInclude(scanner("表名，多个英文逗号分割").split(","));
        strategy.setControllerMappingHyphenStyle(true);
        strategy.setTablePrefix(pc.getModuleName() + "_");
        mpg.setStrategy(strategy);
        mpg.setTemplateEngine(new VelocityTemplateEngine());
        mpg.execute();
    }
}

并将实体类拿出到ly-pojo模块中，方便后续统一管理

添加依赖导包

        
        
            com.leyou
            ly-pojo-item
            1.0-SNAPSHOT
        

12.编写根据父id查询分类列表

controller

package com.leyou.item.controller;


import com.leyou.item.pojo.TbCategory;
import com.leyou.item.service.TbCategoryService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

/**
 * 

 * 商品类目表，类目和商品(spu)是一对多关系，类目与品牌是多对多关系 前端控制器
 * 
 *
 * @author yy
 * @since 2022-05-11
 */
@RestController
@RequestMapping("/category")
public class TbCategoryController {
    @Autowired
    private TbCategoryService categoryService;

    @GetMapping("/of/parent")
    public ResponseEntity> findCategoriesByPid(@RequestParam("pid") Long pid){
        List categories = categoryService.findCategoriesByPid(pid);
        return ResponseEntity.ok(categories);
    }

}

service

 impl

package com.leyou.item.service.impl;


import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.toolkit.CollectionUtils;
import com.baomidou.mybatisplus.core.toolkit.Wrappers;
import com.leyou.commom.exception.pojo.LyException;
import com.leyou.commom.exception.pojo.ResultCode;
import com.leyou.item.mapper.TbCategoryMapper;
import com.leyou.item.pojo.TbCategory;
import com.leyou.item.service.TbCategoryService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * 

 * 商品类目表，类目和商品(spu)是一对多关系，类目与品牌是多对多关系 服务实现类
 * 
 *
 * @author yy
 * @since 2022-05-11
 */
@Service
public class TbCategoryServiceImpl extends ServiceImpl implements TbCategoryService {

    /**
     *
     * 根据父id查询分类
     * @param pid
     * @return
     */
    @Override
    public List findCategoriesByPid(Long pid) {
        LambdaQueryWrapper queryWrapper = Wrappers.lambdaQuery();
        queryWrapper.eq(TbCategory::getParentId,pid);
        List list = this.list(queryWrapper);
        if (CollectionUtils.isEmpty(list)){
            throw new LyException(ResultCode.CATEGORY_NOT_FOUND);
        }
        return list;
    }

}

 测试正常

 前端调用接口出现跨域问题

 13.为什么出现跨域 13.1什么是跨域

跨域是指跨域名的访问，以下情况都属于跨域：

跨域原因说明	示例
域名不同	www.jd.com 与 www.taobao.com
域名相同，端口不同	www.jd.com:8080 与 www.jd.com:8081
二级域名不同	item.jd.com 与 miaosha.jd.com

如果域名和端口都相同，但是请求路径不同，不属于跨域，如：

www.jd.com/item

www.jd.com/goods

而我们刚才是从manage.leyou.com去访问api.leyou.com，这属于二级域名不同，跨域了。

13.2为什么有跨域

跨域不一定会有跨域问题。

因为跨域问题是浏览器对于ajax请求的一种安全限制：一个页面发起的ajax请求，只能是于当前页同域名的路径，这能有效的阻止跨站攻击。

因此：跨域问题 是针对ajax的一种限制。

但是这却给我们的开发带来了不便，而且在实际生产环境中，肯定会有很多台服务器之间交互，地址和端口都可能不同，怎么办？

13.3跨域解决方案

目前比较常用的跨域解决方案有3种：

• Jsonp

  最早的解决方案，利用script标签可以跨域的原理实现。

  限制：

  • 需要服务的支持

  • 只能发起GET请求

• nginx反向代理

  思路是：利用nginx反向代理把跨域为不跨域，支持各种请求方式

  缺点：需要在nginx进行额外配置，语义不清晰

• CORS

  规范化的跨域请求解决方案，安全可靠。

  优势：

  • 在服务端进行控制是否允许跨域，可自定义规则

  • 支持各种请求方式

  缺点：

  • 会产生额外的请求

我们这里会采用cors的跨域方案。

14.跨域问题：CORS解决跨域原理 14.1什么是cors

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

• 浏览器端：

  目前，所有浏览器都支持该功能（IE10以下不行）。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。

• 服务端：

  CORS通信与AJAX没有任何差别，因此你不需要改变以前的业务逻辑。只不过，浏览器会在请求中携带一些头信息，我们需要以此判断是否允许其跨域，然后在响应头中加入一些信息即可。这一般通过过滤器完成即可。

14.2实现原理

浏览器会将ajax请求分为两类，其处理方案略有差异：简单请求、特殊请求。

简单请求

只要同时满足以下两大条件，就属于简单请求。：

（1) 请求方法是以下三种方法之一：

• HEAD

• GET

• POST

（2）HTTP的头信息不超出以下几种字段：

• Accept

• Accept-Language

• Content-Language

• Last-Event-ID

• Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

当浏览器发现发现的ajax请求是简单请求时，会在请求头中携带一个字段：Origin.

Origin中会指出当前请求属于哪个域（协议+域名+端口）。服务会根据这个值决定是否允许其跨域。

如果服务器允许跨域，需要在返回的响应头中携带下面信息：

Access-Control-Allow-Origin: http://manage.leyou.com
Access-Control-Allow-Credentials: true

• Access-Control-Allow-Origin：可接受的域，是一个具体域名或者*，代表任意

• Access-Control-Allow-Credentials：是否允许携带cookie，默认情况下，cors不会携带cookie，除非这个值是true

注意：

如果跨域请求要想 *** 作cookie，需要满足3个条件：

• 服务的响应头中需要携带Access-Control-Allow-Credentials并且为true。

• 浏览器发起ajax需要指定withCredentials 为true

• 响应头中的Access-Control-Allow-Origin一定不能为*，必须是指定的域名

特殊请求

不符合简单请求的条件，会被浏览器判定为特殊请求,，例如请求方式为PUT。

如果是特殊请求产生的跨域会先发起一次OPTIONS预检请求，如果预检请求通过了，才会发送真正的请求。

特殊请求会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

一个“预检”请求的样板：  

OPTIONS /cors HTTP/1.1
Origin: http://manage.leyou.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.leyou.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

与简单请求相比，除了Origin以外，多了两个头：

• Access-Control-Request-Method：接下来会用到的请求方式，比如PUT

• Access-Control-Request-Headers：会额外用到的头信息

预检请求的响应

服务的收到预检请求，如果许可跨域，会发出响应：

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://manage.leyou.com
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Max-Age: 1728000
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

除了Access-Control-Allow-Origin和Access-Control-Allow-Credentials以外，这里又额外多出3个头：

• Access-Control-Allow-Methods：允许访问的方式

• Access-Control-Allow-Headers：允许携带的头

• Access-Control-Max-Age：本次许可的有效时长，单位是秒，过期之前的ajax请求就无需再次进行预检了

如果浏览器得到上述响应，则认定为可以跨域，后续就跟简单请求的处理是一样的了。

15.跨域问题解决： 15.2解决方式一

第一种解决方案最简单，只需要在controller类上添加注解@CrossOrigin 即可！这个注解其实是CORS的实现。

 

 这种方式需要在每个控制器上加上注解，不推荐这种方式。

15.2解决方式二

SpringCloudGateway是Spring官方出品，他已经把各方面想到了，关于这个跨域，官方文档有详细解释：

Spring Cloud Gateway

我们只需要在application.yml文件中配置一下就可以解决跨域问题：

server:
  port: 10010
spring:
  application:
    name: api-gateway
  cloud:
    nacos:
      discovery:
        server-addr: 127.0.0.1:8848
    gateway:
      globalcors:
        corsConfigurations:
          '[/**]':
            allowedOrigins:
              - "http://manage.leyou.com"
            allowedHeaders:
              - "*"
            allowCredentials: true
            maxAge: 360000
            allowedMethods:
              - GET
              - POST
              - DELETE
              - PUT
              - OPTIONS
              - HEAD
      default-filters:
        - name: Hystrix
          args:
            name: fallbackcmd
            fallbackUri: forward:/fallback
      routes:
        - id: item-service   # 路由id,可以随意写
          # 代理的服务地址；lb表示负载均衡(从eureka中获取具体服务)
          uri: lb://item-service
          # 路由断言，可以配置映射路径
          predicates:
            - Path=/api/item/**
          filters:
            # 表示过滤1个路径，2表示两个路径，以此类推
            - StripPrefix=2
hystrix:
  command:
    default:
      execution:
        isolation:
          thread:
            #设置API网关中路由转发请求的HystrixCommand执行超时时间
            timeoutInMilliseconds: 5000