第九节：解决跨域问题与实现品牌查询

此博客用于个人学习，来源于网上，对知识点进行一个整理。

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

http 和 https 也属于跨域

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

1.1 为什么有跨域问题：

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

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

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

1.2 解决跨域问题的方案：

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

• Jsonp

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

  限制：

  • 需要服务的支持
  • 只能发起 GET 请求

• nginx 反向代理

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

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

• CORS

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

  优势：

  • 在服务端进行控制是否允许跨域，可自定义规则
  • 支持各种请求方式

  缺点：

  • 会产生额外的请求

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

1.3 cors：

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

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

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

• 浏览器端：

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

• 服务端：

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

1.4 cors 原理：

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

1）简单请求：

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

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
Content-Type: text/html; charset=utf-8

• 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 一定不能为*，必须是指定的域名

2）特殊请求：

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

特殊请求会在正式通信之前，增加一次 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 请求就无需再次进行预检了

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

1.5 实现：

事实上，SpringMVC 已经帮我们写好了 CORS 的跨域过滤器：CorsFilter ，内部已经实现了刚才所讲的判定逻辑，直接用就好了。

在 leyou-gateway 中编写一个配置类，并且注册CorsFilter：

@Configuration
public class LeyouCorsConfiguration {

    @Bean
    public CorsFilter corsFilter(){
        //初始化cors配置对象
        CorsConfiguration configuration = new CorsConfiguration();
        //允许跨域的域名，如果要携带cookie，不能写*，*：代表所有域名都可以跨域访问
        configuration.addAllowedOrigin("http://manage.leyou.com");
        configuration.setAllowCredentials(true);//允许携带cookie
        configuration.addAllowedMethod("*");//代表所有的请求方法：GET POST PUT Delete。。。
        configuration.addAllowedHeader("*");//允许携带任何头信息
        //初始化cors配资源对象
        UrlBasedCorsConfigurationSource configurationSource = new UrlBasedCorsConfigurationSource();
        configurationSource.registerCorsConfiguration("/**",configuration);
        //返回corsFilter实例，参数:cors配资源对象
        return new CorsFilter(configurationSource);
    }
}

2. 品牌的查询——后台提供查询接口：

2.1 数据库表：

CREATE TABLE `tb_brand` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '品牌id',
  `name` varchar(50) NOT NULL COMMENT '品牌名称',
  `image` varchar(200) DEFAULT '' COMMENT '品牌图片地址',
  `letter` char(1) DEFAULT '' COMMENT '品牌的首字母',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=325400 DEFAULT CHARSET=utf8 COMMENT='品牌表，一个品牌下有多个商品（spu），一对多关系';

这里需要注意的是，品牌和商品分类之间是多对多关系。因此我们有一张中间表，来维护两者间关系：

CREATE TABLE `tb_category_brand` (
  `category_id` bigint(20) NOT NULL COMMENT '商品类目id',
  `brand_id` bigint(20) NOT NULL COMMENT '品牌id',
  PRIMARY KEY (`category_id`,`brand_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='商品分类和品牌的中间表，两者是多对多关系';

但是，你可能会发现，这张表中并没有设置外键约束，似乎与数据库的设计范式不符。原因如下：

• 外键会严重影响数据库读写的效率
• 数据删除时会比较麻烦

在电商行业，性能是非常重要的。我们宁可在代码中通过逻辑来维护表关系，也不设置外键。

2.2 实体类：

@Table(name = "tb_brand")
public class Brand {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;// 品牌名称
    private String image;// 品牌图片
    private Character letter;

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getImage() {
        return image;
    }

    public void setImage(String image) {
        this.image = image;
    }

    public Character getLetter() {
        return letter;
    }

    public void setLetter(Character letter) {
        this.letter = letter;
    }
}

2.3 mapper：

使用通用 mapper 来简化开发：

public interface BrandMapper extends Mapper<Brand> {
}

2.4 controller：

编写 controller 先思考四个问题：

• 请求方式：查询，肯定是Get
• 请求路径：分页查询，/brand/page
• 请求参数：根据编写的页面，有分页功能，有排序功能，有搜索过滤功能，因此至少要有5个参数：
  • page：当前页，int
  • rows：每页大小，int
  • sortBy：排序字段，String
  • desc：是否为降序，boolean
  • key：搜索关键词，String
• 响应结果：分页结果一般至少需要两个数据
  • total：总条数
  • items：当前页数据
  • totalPage：有些还需要总页数

这里我们封装一个类，来表示分页结果（几个构造方法以后的功能需要用到）：

public class PageResult<T>{

    private Long total;// 总条数
    private Integer totalPage;// 总页数
    private List<T> items;// 当前页数据

    public Long getTotal() {
        return total;
    }

    public void setTotal(Long total) {
        this.total = total;
    }

    public Integer getTotalPage() {
        return totalPage;
    }

    public void setTotalPage(Integer totalPage) {
        this.totalPage = totalPage;
    }

    public List<T> getItems() {
        return items;
    }

    public void setItems(List<T> items) {
        this.items = items;
    }

    public PageResult() {
    }

    public PageResult(Long total, List<T> items) {
        this.total = total;
        this.items = items;
    }

    public PageResult(Long total, Integer totalPage, List<T> items) {
        this.total = total;
        this.totalPage = totalPage;
        this.items = items;
    }
}

PageResult 以后可能在其它项目中也有需求，因此我们将其抽取到 leyou-common 中，提高复用性。

编写 controller：

@Controller
@RequestMapping("brand")
public class BrandController {

    @Autowired
    private BrandService brandService;

    /**
     * 根据查询条件分页并排序查询品牌信息
     * @param key
     * @param page
     * @param rows
     * @param sortBy
     * @param desc
     * @return
     */
    @GetMapping("page")
    public ResponseEntity<PageResult<Brand>> queryBrandsByPage(
            @RequestParam(value = "key",required = false)String key,
            @RequestParam(value = "page",defaultValue = "1")Integer page,
            @RequestParam(value = "rows",defaultValue = "5")Integer rows,
            @RequestParam(value = "sortBy",required = false)String sortBy,
            @RequestParam(value = "desc",required = false)Boolean desc
    ){
        PageResult<Brand> result = this.brandService.queryBrandByPage(key,page,rows,sortBy,desc);
        if (CollectionUtils.isEmpty(result.getItems())){
            return ResponseEntity.notFound().build();
        }
        return ResponseEntity.ok(result);
    }
}

2.5 Service：

@Service
public class BrandService {

    @Autowired
    private BrandMapper brandMapper;

    /**
     * 根据查询条件分页并排序查询品牌信息
     * @param key
     * @param page
     * @param rows
     * @param sortBy
     * @param desc
     * @return
     */
    public PageResult<Brand> queryBrandByPage(String key, Integer page, Integer rows, String sortBy, Boolean desc) {
        //初始化example对象
        Example example = new Example(Brand.class);
        Example.Criteria criteria = example.createCriteria();

        //根据name模糊查询，或者根据首字母查询
        if (StringUtils.isNotBlank(key)){
            criteria.andLike("name", "%" + key + "%").orEqualTo("letter", key);
        }

        //添加分页条件
        PageHelper.startPage(page,rows);

        //添加排序条件
        if (StringUtils.isNotBlank(sortBy)) {
            example.setOrderByClause(sortBy + " " + (desc ? "desc" : "asc"));
        }
        List<Brand> brands = this.brandMapper.selectByExample(example);

        //包装成pageInfo对象
        PageInfo<Brand> pageInfo = new PageInfo<>(brands);

        //包装成分页结果集返回
        return new PageResult<>(pageInfo.getTotal(),pageInfo.getList());
    }
}

3. 品牌的查询——异步加载：

3.1 异步查询工具 axios：

axios 的 Get 请求语法：

axios.get("/item/category/list?pid=0") // 请求路径和请求参数拼接
    .then(function(resp){
    	// 成功回调函数
	})
    .catch(function(){
    	// 失败回调函数
	})
// 参数较多时，可以通过params来传递参数
axios.get("/item/category/list", {
        params:{
            pid:0
        }
	})
    .then(function(resp){})// 成功时的回调
    .catch(function(error){})// 失败时的回调

axios 的 POST 请求语法：比如新增一个用户

axios.post("/user",{
    	name:"Jack",
    	age:21
	})
    .then(function(resp){})
    .catch(function(error){})

POST 请求传参，不需要像 GET 请求那样定义一个对象，在对象的 params 参数中传参。post() 方法的第二个参数对象，就是将来要传递的参数。

3.2 axios 的全局配置：

在我们的项目中，已经引入了 axios，并且进行了简单的封装，在 src 下的 http.js 中，http.js 中对 axios 进行了一些默认配置：

import Vue from 'vue'
import axios from 'axios'
import config from './config'
// config中定义的基础路径是：http://api.leyou.com/api
axios.defaults.baseURL = config.api; // 设置axios的基础请求路径
axios.defaults.timeout = 2000; // 设置axios的请求时间

Vue.prototype.$http = axios;// 将axios赋值给Vue原型的$http属性，这样所有vue实例都可使用该对象

• http.js对axios进行了全局配置： baseURL=config.api ，即 http://api.leyou.com/api 。因此以后所有用 axios 发起的请求，都会以这个地址作为前缀。

• 通过 Vue.property.$http = axios ，将 axios 赋值给了 Vue原型中的 $http 。这样以后所有的 Vue 实例都可以访问到$http，也就是访问到了axios了。

3.3 项目中使用：

在组件 Brand.vue 的 getDataFromServer 方法，通过 $http 发起 get 请求，测试查询品牌的接口，看是否能获取到数据：

methods: {
  getDataFromServer() { // 从服务的加载数的方法。
  // 发起请求
  this.$http.get("/item/brand/page", {
    params: {
      key: this.search, // 搜索条件
      page: this.pagination.page,// 当前页
      rows: this.pagination.rowsPerPage,// 每页大小
      sortBy: this.pagination.sortBy,// 排序字段
      desc: this.pagination.descending// 是否降序
    }
  }).then(resp => { // 这里使用箭头函数
    this.brands = resp.data.items;
    this.totalBrands = resp.data.total;
    // 完成赋值后，把加载状态赋值为false
    this.loading = false;
  })
},

3.4 完成分页和过滤：

1）分页：

可以利用 Vue 的监视功能：watch，当 pagination 发生改变时，会调用我们的回调函数，我们在回调函数中进行数据的查询。具体实现：

watch: {
      pagination: { // 监视pagination属性的变化
        deep: true, // deep为true，会监视pagination的属性及属性中的对象属性变化
        handler() {
          // 变化后的回调函数，这里我们再次调用getDataFromServer即可
          this.getDataFromServer();
        }
      },

2）过滤：

过滤字段对应的是 search 属性，我们只要监视这个属性即可:

search: { // 监视搜索字段
        handler() {
          this.getDataFromServer();
        }
      }