记录vue项目配置多个代理

需求把/api代理的服务器端口8089，把/api/v1代理到服务器端口1235;

1. 本地项目配置

打开vite.config.ts

proxy: {
        // 本地开发环境通过代理实现跨域
        // 正则表达式写法
        "/api/v1": {
          target: https://192.168.x.xxx:1235, // 后端服务实际地址
          changeOrigin: true, //开启代理
          secure: false,//忽略证书
          rewrite: path => path.replace(/^\/api\/v1/, ''),
        },
        "/api": {
          target: https://192.168.x.xxx:8089, // 后端服务实际地址
          changeOrigin: true, //开启代理
          secure: false,//忽略证书
          rewrite: path => path.replace(/^\/api/, ''),
        },
      }

本地就可以通过/api和/api/v1来区分要代理的端口了，因为我的项目axios是统一添加了/api，所以每个要转发不同服务器的接口前面再多加一个/v1就可以区分了

要区分的接口添加/v1

2.nginx配置

nginx.config配置如下

location /api/ {
     proxy_pass http://192.168.x.xxx:8089/;
     proxy_set_header Host $host;
     proxy_set_header X-Real-IP $remote_addr;
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     proxy_set_header X-Forwarded-Proto $scheme;
    }
location /api/v1/ {
      proxy_pass https://192.168.x.xxx:1235/;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Host $http_host;
      proxy_set_header X-Forwarded-Port $server_port;
      proxy_set_header X-Forwarded-Proto $scheme;
    }