14 微服务电商【黑马乐优商城】:day06-使用nginx反向代理并掌握cors解决跨域

本项目的笔记和资料的Download,请点击这一句话自行获取。

day01-springboot(理论篇) ;day01-springboot(实践篇)

day02-springcloud(理论篇一)  ;day02-springcloud(理论篇二)  ;day02-springcloud(理论篇三) ;day02-springcloud(理论篇四) ;

day03-springcloud(Hystix,Feign)  ;day03-springcloud(Zuul网关)

day04-项目搭建(一) ;day04-项目搭建(二)day04-ES6语法入门

day05-Vue入门学习

day06-了解vue-router和webpack的使用  ; day06-初识Vuetify框架UI框架和使用域名访问本地项目 ;  day06-使用nginx反向代理并掌握cors解决跨域

14 微服务电商【黑马乐优商城】:day06-使用nginx反向代理并掌握cors解决跨域


# 0.学习目标

- 使用资料搭建后台系统
- 会使用nginx进行反向代理
- 实现商品分类查询功能
- 掌握cors解决跨域
- 实现品牌查询功能


4.4.nginx解决端口问题

域名问题解决了,但是现在要访问后台页面,还得自己加上端口:http://manage.taotao.com:9001

这就不够优雅了。我们希望的是直接域名访问:http://manage.taotao.com。这种情况下端口默认是80,如何才能把请求转移到9001端口呢?

这里就要用到反向代理工具:Nginx

4.4.1.什么是Nginx

14 微服务电商【黑马乐优商城】:day06-使用nginx反向代理并掌握cors解决跨域

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

  • 反向代理
  • 负载均衡
  • 动态路由
  • 请求过滤

4.4.2.nginx作为web服务器

Web服务器分2类:

  • web应用服务器,如:
    • tomcat
    • resin
    • jetty
  • web服务器,如:
    • Apache 服务器
    • Nginx
    • IIS

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

4.4.3.nginx作为反向代理

什么是反向代理?

  • 代理:通过客户机的配置,实现让一台服务器(代理服务器)代理客户机,客户的所有请求都交给代理服务器处理。
  • 反向代理:用一台服务器,代理真实服务器,用户访问时,不再是访问真实服务器,而是代理服务器。

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

  • 我们需要提前在nginx中配置好反向代理的规则,不同的请求,交给不同的真实服务器处理
  • 当请求到达nginx,nginx会根据已经定义的规则进行请求的转发,从而实现路由功能

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

14 微服务电商【黑马乐优商城】:day06-使用nginx反向代理并掌握cors解决跨域

14 微服务电商【黑马乐优商城】:day06-使用nginx反向代理并掌握cors解决跨域

4.4.4.安装和使用

安装

安装非常简单,把课前资料提供的nginx直接解压即可,绿色免安装!

我们在本地安装一台nginx:

14 微服务电商【黑马乐优商城】:day06-使用nginx反向代理并掌握cors解决跨域

解压后,目录结构:

14 微服务电商【黑马乐优商城】:day06-使用nginx反向代理并掌握cors解决跨域

  1. conf:配置目录
  2. contrib:第三方依赖
  3. html:默认的静态资源目录
  4. logs:日志目录
  5. nginx.exe:启动程序

反向代理配置

示例:

14 微服务电商【黑马乐优商城】:day06-使用nginx反向代理并掌握cors解决跨域

nginx中的每个server就是一个反向代理配置,可以有多个server

完整配置:

#user  nobody;
worker_processes ; events {
worker_connections ;
} http {
include mime.types;
default_type application/octet-stream;
sendfile on; keepalive_timeout ; gzip on;
server {
listen ;
server_name manage.leyou.com; proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; location / {
proxy_pass http://127.0.0.1:9001;
proxy_connect_timeout ;
proxy_read_timeout ;
}
}
server {
listen ;
server_name api.leyou.com; proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; location / {
proxy_pass http://127.0.0.1:10010;
proxy_connect_timeout ;
proxy_read_timeout ;
}
}
}

二级域名 Nginx反向代理

使用

nginx可以通过命令行来启动,操作命令:

  • 启动:start nginx.exe
  • 停止:nginx.exe -s stop
  • 重新加载:nginx.exe -s reload

启动过程会闪烁一下,启动成功后,任务管理器中会有两个nginx进程。

4.5.测试

启动nginx,然后用域名访问后台管理系统:

14 微服务电商【黑马乐优商城】:day06-使用nginx反向代理并掌握cors解决跨域

现在实现了域名访问网站了,中间的流程是怎样的呢?

14 微服务电商【黑马乐优商城】:day06-使用nginx反向代理并掌握cors解决跨域

  1. 浏览器准备发起请求,访问http://mamage.leyou.com,但需要进行域名解析

  2. 优先进行本地域名解析,因为我们修改了hosts,所以解析成功,得到地址:127.0.0.1

  3. 请求被发往解析得到的ip,并且默认使用80端口:http://127.0.0.1:80

    本机的nginx一直监听80端口,因此捕获这个请求

  4. nginx中配置了反向代理规则,将manage.leyou.com代理到127.0.0.1:9001,因此请求被转发

  5. 后台系统的webpack server监听的端口是9001,得到请求并处理,完成后将响应返回到nginx

  6. nginx将得到的结果返回到浏览器


5.实现商品分类查询

商城的核心自然是商品,而商品多了以后,肯定要进行分类,并且不同的商品会有不同的品牌信息,其关系如图所示:

14 微服务电商【黑马乐优商城】:day06-使用nginx反向代理并掌握cors解决跨域

  • 一个商品分类下有很多商品
  • 一个商品分类下有很多品牌
  • 而一个品牌,可能属于不同的分类
  • 一个品牌下也会有很多商品

因此,我们需要依次去完成:商品分类、品牌、商品的开发。

5.1.导入数据

首先导入课前资料提供的sql:

14 微服务电商【黑马乐优商城】:day06-使用nginx反向代理并掌握cors解决跨域

我们先看商品分类表:

14 微服务电商【黑马乐优商城】:day06-使用nginx反向代理并掌握cors解决跨域

因为商品分类会有层级关系,因此这里我们加入了parent_id字段,对本表中的其它分类进行自关联。

5.2.页面实现

5.2.1.页面分析

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

14 微服务电商【黑马乐优商城】:day06-使用nginx反向代理并掌握cors解决跨域

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

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

14 微服务电商【黑马乐优商城】:day06-使用nginx反向代理并掌握cors解决跨域

页面模板:

<template>
<v-card>
<v-flex xs12 sm10>
<v-tree url="/item/category/list"
:treeData="treeData"
:isEdit="isEdit"
@handleAdd="handleAdd"
@handleEdit="handleEdit"
@handleDelete="handleDelete"
@handleClick="handleClick"
/>
</v-flex>
</v-card>
</template>

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

14 微服务电商【黑马乐优商城】:day06-使用nginx反向代理并掌握cors解决跨域

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

14 微服务电商【黑马乐优商城】:day06-使用nginx反向代理并掌握cors解决跨域

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

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

14 微服务电商【黑马乐优商城】:day06-使用nginx反向代理并掌握cors解决跨域

里面涉及一些vue的高级用法,大家暂时不要关注其源码,会用即可。

5.2.2.树组件的用法

也可参考课前资料中的:《自定义Vue组件的用法.md》

这里我贴出树组件的用法指南。

属性列表:

属性名称 说明 数据类型 默认值
url 用来加载数据的地址,即延迟加载 String -
isEdit 是否开启树的编辑功能 boolean false
treeData 整颗树数据,这样就不用远程加载了 Array -

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

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

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

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

事件:

事件名称 说明 回调参数
handleAdd 新增节点时触发,isEdit为true时有效 新增节点node对象,包含属性:name、parentId和sort
handleEdit 当某个节点被编辑后触发,isEdit为true时有效 被编辑节点的id和name
handleDelete 当删除节点时触发,isEdit为true时有效 被删除节点的id
handleClick 点击某节点时触发 被点击节点的node对象,包含完整的node信息

完整node的信息

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

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

5.3.实现功能

5.3.1.url异步请求

给大家的页面中,treeData是假数据,我们删除数据treeData属性,只保留url看看会发生什么:

<v-tree url="/item/category/list"
:isEdit="isEdit"
@handleAdd="handleAdd"
@handleEdit="handleEdit"
@handleDelete="handleDelete"
@handleClick="handleClick"
/>

刷新页面,可以看到:

14 微服务电商【黑马乐优商城】:day06-使用nginx反向代理并掌握cors解决跨域

页面中的树没有了,并且发起了一条请求:http://localhost/api/item/category/list?pid=0

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

http://manage.leyou.com/item/category/list

但实际却是:

http://localhost/api/item/category/list?pid=0

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

14 微服务电商【黑马乐优商城】:day06-使用nginx反向代理并掌握cors解决跨域

路径是localhost,并且默认加上了/api的前缀,这恰好与我们的网关设置匹配,我们只需要把地址改成网关的地址即可,因为我们使用了nginx反向代理,这里可以写域名。

接下来,我们要做的事情就是编写后台接口,返回对应的数据即可。

5.3.2.实体类

ly-item-interface中添加category实体类:

14 微服务电商【黑马乐优商城】:day06-使用nginx反向代理并掌握cors解决跨域

内容:

package com.leyou.item.pojo;

import lombok.Data;
import tk.mybatis.mapper.annotation.KeySql; import javax.persistence.Id;
import javax.persistence.Table; @Table(name="tb_category")
@Data
public class Category {
@Id
@KeySql(useGeneratedKeys=true)
private Long id;
private String name;
private Long parentId;
private Boolean isParent;
private Integer sort;
// getter和setter略
// 注意isParent生成的getter和setter方法需要手动加上Is
}

public class Category

要注意的是,这里要用到jpa的注解,因此我们在ly-item-iterface中添加jpa依赖的替代方案:

        <dependency>
<groupId>tk.mybatis</groupId>
<artifactId>mapper-core</artifactId>
<version>1.0.4</version>
</dependency>

5.3.3.controller

编写一个controller一般需要知道四个内容:

  • 请求方式:决定我们用GetMapping还是PostMapping
  • 请求路径:决定映射路径
  • 请求参数:决定方法的参数
  • 返回值结果:决定方法的返回值

在刚才页面发起的请求中,我们就能得到绝大多数信息:

14 微服务电商【黑马乐优商城】:day06-使用nginx反向代理并掌握cors解决跨域

  • 请求方式:Get

  • 请求路径:/api/item/category/list。其中/api是网关前缀,/item是网关的路由映射,真实的路径应该是/category/list

  • 请求参数:pid=0,根据tree组件的说明,应该是父节点的id,第一次查询为0,那就是查询一级类目

  • 返回结果:??

    根据前面tree组件的用法我们知道,返回的应该是json数组:

[
{
"id": 74,
"name": "手机",
"parentId": 0,
"isParent": true,
"sort": 2
},
{
"id": 75,
"name": "家用电器",
"parentId": 0,
"isParent": true,
"sort": 3
}
]
  • 对应的java类型可以是List集合,里面的元素就是类目对象了。也就是List<Category>

添加Controllerr代码:

@RestController
@RequestMapping("category")
public class CategoryController {
@Autowired
private CategoryService categoryService; /**
* 根据父节点id查询商品分类
* @param pid
* @return
*/
@GetMapping("list")
public ResponseEntity<List<Category>> queryCategoryListByPid(@RequestParam("pid")Long pid){
return ResponseEntity.ok(categoryService.queryCategoryListByPid(pid));
}
}

5.3.4.service

一般service层我们会定义接口和实现类,不过这里我们就偷懒一下,直接写实现类了:

@Service
public class CategoryServiceImpl implements CategoryService {
@Autowired
private CategoryMapper categoryMapper; @Override
public List<Category> queryCategoryListByPid(Long pid) {
//查询条件,mapper会把对象中的非空属性作为查询条件
Category t =new Category();
t.setParentId(pid);
//该方法查询实体对象中非空字段
List<Category> list = categoryMapper.select(t);
if(CollectionUtils.isEmpty(list)){
throw new LyException(ExceptionEnum.CATEGORY_NOT_FOND);
} return list;
}
}

添加自定义异常的枚举内容:

package com.leyou.common.enums;

import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor; @Getter
@NoArgsConstructor
@AllArgsConstructor
public enum ExceptionEnum { PRICE_CANNOT_BE_NULL(400,"价格不能为空!"),
CATEGORY_NOT_FOND(404,"商品分类没查到"),
;
private int code;
private String msg; }

public enum ExceptionEnum

5.3.5.mapper

我们使用通用mapper来简化开发:

public interface CategoryMapper extends Mapper<Category> {
}

要注意,我们并没有在mapper接口上声明@Mapper注解,那么mybatis如何才能找到接口呢?

我们在启动类上添加一个扫描包功能:

@SpringBootApplication
@EnableDiscoveryClient
@MapperScan("com.leyou.item.mapper") // mapper接口的包扫描
public class LeyouItemServiceApplication { public static void main(String[] args) {
SpringApplication.run(LeyouItemServiceApplication.class, args);
}
}

5.3.6.启动并测试

我们不经过网关,直接访问:http://localhost:8081/category/list

然后试试网关是否畅通:http://api.leyou.com/api/item/category/list

一切OK!

然后刷新后台管理页面查看:

14 微服务电商【黑马乐优商城】:day06-使用nginx反向代理并掌握cors解决跨域

发现报错了!

浏览器直接访问没事,但是这里却报错,什么原因?


6.跨域问题

跨域:浏览器对于javascript的同源策略的限制 。

以下情况都属于跨域:

跨域原因说明 示例
域名不同 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,这属于二级域名不同,跨域了。

6.1.为什么有跨域问题?

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

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

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

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

6.2.解决跨域问题的方案

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

  • Jsonp

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

    限制:

    • 需要服务的支持
    • 只能发起GET请求
  • nginx反向代理

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

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

  • CORS

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

    优势:

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

    缺点:

    • 会产生额外的请求

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

6.3.cors解决跨域

6.3.1.什么是cors

CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。

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

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

  • 浏览器端:

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

  • 服务端:

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

6.3.2.原理有点复杂

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

6.3.2.1.简单请求

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

(1) 请求方法是以下三种方法之一:

  • HEAD
  • GET
  • POST

(2)HTTP的头信息不超出以下几种字段:

  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-Type:只限于三个值application/x-www-form-urlencodedmultipart/form-datatext/plain

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

14 微服务电商【黑马乐优商城】:day06-使用nginx反向代理并掌握cors解决跨域

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

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

Access-Control-Allow-Origin: http://manage.leyou.com
Access-Control-Allow-Credentials: true
Content-Type: text/html; charset=utf-
  • Access-Control-Allow-Origin:可接受的域,是一个具体域名或者*(代表任意域名)
  • Access-Control-Allow-Credentials:是否允许携带cookie,默认情况下,cors不会携带cookie,除非这个值是true

有关cookie:

要想操作cookie,需要满足3个条件:

  • 服务的响应头中需要携带Access-Control-Allow-Credentials并且为true。
  • 浏览器发起ajax需要指定withCredentials 为true
  • 响应头中的Access-Control-Allow-Origin一定不能为*,必须是指定的域名

6.3.2.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  OK
Date: Mon, Dec :: GMT
Server: Apache/2.0. (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:
Content-Type: text/html; charset=utf-
Content-Encoding: gzip
Content-Length:
Keep-Alive: timeout=, max=
Connection: Keep-Alive
Content-Type: text/plain

除了Access-Control-Allow-OriginAccess-Control-Allow-Credentials以外,这里又额外多出3个头:

  • Access-Control-Allow-Methods:允许访问的方式
  • Access-Control-Allow-Headers:允许携带的头
  • Access-Control-Max-Age:本次许可的有效时长,单位是秒,过期之前的ajax请求就无需再次进行预检了

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

6.3.3.实现非常简单

虽然原理比较复杂,但是前面说过:

  • 浏览器端都有浏览器自动完成,我们无需操心
  • 服务端可以通过拦截器统一实现,不必每次都去进行跨域判定的编写。

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

leyou-gateway中编写一个配置类,并且注册CorsFilter:

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter; @Configuration
public class GlobalCorsConfig {
@Bean
public CorsFilter corsFilter() {
//1.添加CORS配置信息
CorsConfiguration config = new CorsConfiguration();
//1) 允许的域,不要写*,否则cookie就无法使用了
config.addAllowedOrigin("http://manage.leyou.com");
//2) 是否发送Cookie信息
config.setAllowCredentials(true);
//3) 允许的请求方式
config.addAllowedMethod("OPTIONS");
config.addAllowedMethod("HEAD");
config.addAllowedMethod("GET");
config.addAllowedMethod("PUT");
config.addAllowedMethod("POST");
config.addAllowedMethod("DELETE");
config.addAllowedMethod("PATCH");
// 4)允许的头信息
config.addAllowedHeader("*"); //2.添加映射路径,我们拦截一切请求
UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
configSource.registerCorsConfiguration("/**", config); //3.返回新的CorsFilter.
return new CorsFilter(configSource);
}
}

结构:

14 微服务电商【黑马乐优商城】:day06-使用nginx反向代理并掌握cors解决跨域

重启测试,访问正常:

14 微服务电商【黑马乐优商城】:day06-使用nginx反向代理并掌握cors解决跨域

分类的增删改功能暂时就不做了,页面已经预留好了事件接口,有兴趣的同学可以完成一下。

==============================================

参考资料:

end

上一篇:网络对抗技术 20165220 Exp6 信息搜集与漏洞扫描


下一篇:全方位理解Android权限之底层实现概览