nginx反向代理，vue2反向代理，vue3反向代理

正向代理和反向代理

反向代理（Reverse Proxy）对应的是正向代理（Forward Proxy），他们的区别：
正向代理： 一般的访问流程是客户端直接向目标服务器发送请求并获取内容，使用正向代理后，客户端改为向代理服务器发送请求，并指定目标服务器（原始服务器），然后由代理服务器和原始服务器通信，转交请求并获得的内容，再返回给客户端。正向代理隐藏了真实的客户端，为客户端收发请求，使真实客户端对服务器不可见；

举个具体的例子 🌰，你的浏览器无法直接访问谷哥，这时候可以通过一个代理服务器来帮助你访问谷哥，那么这个服务器就叫正向代理。

反向代理： 与一般访问流程相比，使用反向代理后，直接收到请求的服务器是代理服务器，然后将请求转发给内部网络上真正进行处理的服务器，得到的结果返回给客户端。反向代理隐藏了真实的服务器，为服务器收发请求，使真实服务器对客户端不可见。一般在处理跨域请求的时候比较常用。现在基本上所有的大型网站都设置了反向代理。
举个具体的例子 🌰，去饭店吃饭，可以点川菜、粤菜、江浙菜，饭店也分别有三个菜系的厨师 👨‍🍳，但是你作为顾客不用管哪个厨师给你做的菜，只用点菜即可，小二将你菜单中的菜分配给不同的厨师来具体处理，那么这个小二就是反向代理服务器。

简单的说，一般给客户端做代理的都是正向代理，给服务器做代理的就是反向代理。

负载均衡

一般情况下，客户端发送多个请求到服务器，服务器处理请求，其中一部分可能要操作一些资源比如数据库、静态资源等，服务器处理完毕后，再将结果返回给客户端。

这种模式对于早期的系统来说，功能要求不复杂，且并发请求相对较少的情况下还能胜任，成本也低。随着信息数量不断增长，访问量和数据量飞速增长，以及系统业务复杂度持续增加，这种做法已无法满足要求，并发量特别大时，服务器容易崩。

很明显这是由于服务器性能的瓶颈造成的问题，除了堆机器之外，最重要的做法就是负载均衡。

请求爆发式增长的情况下，单个机器性能再强劲也无法满足要求了，这个时候集群的概念产生了，单个服务器解决不了的问题，可以使用多个服务器，然后将请求分发到各个服务器上，将负载分发到不同的服务器，这就是负载均衡，核心是「分摊压力」。Nginx 实现负载均衡，一般来说指的是将请求转发给服务器集群。

举个具体的例子 🌰，晚高峰乘坐地铁的时候，入站口经常会有地铁工作人员大喇叭“请走 B 口，B 口人少车空…”，这个工作人员的作用就是负载均衡

动静分离

为了加快网站的解析速度，可以把动态页面和静态页面由不同的服务器来解析，加快解析速度，降低原来单个服务器的压力。

一般来说，都需要将动态资源和静态资源分开，由于 Nginx 的高并发和静态资源缓存等特性，经常将静态资源部署在 Nginx 上。如果请求的是静态资源，直接到静态资源目录获取资源，如果是动态资源的请求，则利用反向代理的原理，把请求转发给对应后台应用去处理，从而实现动静分离。
使用前后端分离后，可以很大程度提升静态资源的访问速度，即使动态服务不可用，静态资源的访问也不会受到影响。

转自：https://juejin.cn/post/6844904144235413512

nginx反向代理

思路就是把两个端口号不一样的url都代理到8080端口，也就是当我们访问一个页面时我们访问的就是8080但是nginx可以帮我们代理到原来html页面的真正端口（前端对于协议和域名产生的跨域是无法解决的，只能解决端口不一样产生的跨域），当客户端要给服务单发送请求时，就可以往8080端口发送请求，这时nginx就会把请求发送到3000端口，就不会产生跨域了

具体配置

vue2反向代理

1.找到config/index.js文件
2.找到dev下面的 proxyTable:{ } 写入代码

 proxyTable: {
      //定义/controller/*,注：controller叫什么都可以，但是下面要统一，'*'号必须要加
      "/controller/*": {
        //将http://127.0.0.1:8088/印射为/controller
        target: "http://127.0.0.1:8090/", //跨域地址后台服务器地址
        changeOrigin: true, //是否跨域
        // secure: false, //是否使用https
        pathRewrite: {
           //匹配以/api为开头的请求地址，并使用/controller替换替换成‘/XXX’，
          "^/api": "/XXX" 
        }
      }
    },

3.修改request请求文件

var service = axios.create({
//   baseURL: process.env.BASE_API,//本地调试
  baseURL: "/controller/", // api的base_url
  timeout: 30000, // request timeout,
  method: "post"
});

合着项目发布不能用 😥

转自：https://blog.csdn.net/LeftStrang/article/details/113883434

vue3反向代理

在这里插入代码片`大家都知道vue3.x相比于vue2.x更加的轻量级，也就意味着有些文件已经不会有了，
那么在vue 3.x中如何设置反向代理？

首先在根目录创建一个新的js文件(vue.config.js)

module.exports = {
    devServer: {
      proxy: {
        '/api': {//请求称号
          target: 'http://127.0.0.1:3000', //请求的接口
          changeOrigin: true,//允许跨域
          pathRewrite: {
            '^/api': '/' 
          }
        }
      }
    }
}

设置之后，如果用的是axios的话 将/api 当做域名就可以了 比如

(async function(self){
            var res = await self.$http.get(
                "api/books/nowbooks"
            )
            self.resq = res.data
        })(this)

这个就相当于

(async function(self){
            var res = await self.$http.get(
                "http://127.0.0.1:3000/books/nowbooks"
            )
            self.resq = res.data
        })(this)

转自：https://blog.csdn.net/weixin_43971794/article/details/88954736