WEB服务器

这里不关心服务器是Apace还是Nginx, 而在于服务器的作用，一台服务器可以作为源服务器，也可以作为中转服务器，甚至可以在一台服务器上搭建不同域名的网站.

虚拟主机

HTTP/1.1 规范允许一台HTTP服务器搭建多个Web站点。利用虚拟主机的功能，可以在一台物理服务器（一个IP地址）上虚拟出多个主机，每个主机映射一个独立域名。因此，当用户访问域名 http://a.com/时，DNS域名系统将其解析成IP地址，根据IP找到物理服务器，然后再通过请求首部的HOST字段（这也正是为什么HTTP/1.1强制要求携带HOST了）确认对方的虚拟主机。

代理服务器

代理服务器就是客户端与服务器之间的 “中间商”，即HTTP请求通过代理服务器转发给服务器，在将服务器响应的数据返回给客户端的行为。 代理服务器可以做缓存服务器，也可以用来隐藏用户身份（正向代理）或服务器身份（反向代理）增加安全性

• 正向代理，从客户/客户端角度出发，为了从源服务器中取得 内容，由客户端向代理服务器发出请求，并指定目标访问服务器，然后，代理服务器向源服务器转交请求，并将获取的内容返回给客户端。在正向代理过程中隐藏了真正请求的客户端，即服务端不知道真正请求的客户是谁。
• 反向代理，从客户端向反向代理发出请求，反向代理服务器收到请求后判断请求走向何处，然后将结果反馈给客户端。同样的是，在反向代理过程中，隐藏了内部服务器的信息。用户不需要知道具体哪台是真正的服务器，只需要知道代理服务器是谁就好。这种形式的代理通常被用作负载均衡,比如Nginx就是一种出色的反向代理服务器。
• 反向代理解决跨域问题，我们使用vue-cli这种脚手架工具进行开发时，经常会遇到跨域问题，因为项目自身启动本地服务需要占用一个端口（如http://localhost:8080/#/）,所以必然会产生跨域问题（因为本地服务端口和服务端接口地址不是同源）。在使用webpack做构建工具的项目中，经常会使用proxyTable代理实现跨域。
  之所以出现跨域是因为浏览器有同源策略的限制，但服务器是没有同源策略的限制的。
  当我们本地服务（域名：http://localhost:8080/#/）要请求的目标服务器（域名：http://target.com/）的资源时，我们不是直接请求http://target.com/，而是请求本地服务自身http://localhost:8080/#/，本地代理服务再将接口转发给http://target.com/ （这时候是两个服务器直接通信了，而不是客户端与服务器的直接通信，本地代理服务配置成目标服务器域名，就不存在跨域了），本地代理服务获取到目标服务器的响应数据之后 通过再代理伪装成本地服务请求的返回值返回给客户端。

本地在浏览器向本地服务发出请求 -> 本地代理转发 -> 目标服务 -> 响应数据 -> 通过代理伪装成本地服务器请求的返回值 -> 浏览器接受本地服务数据（目标服务）

vue-cli 反向代理配置如下：

dev: {
    // Paths
    assetsSubDirectory: 'xxx',
    assetsPublicPath: 'xxx',
    proxyTable: [
      {
        target: `http://target.com/`,  // 接口域名 [重点]
        secure: false,
        changeOrigin: true
      }
    ]
 }