通过nginx配置反向代理解决vue项目调用多个不同api接口的问题

最近做的一个主体vue项目需要集成其他vue项目进来，但是集成进来的vue项目的接口跟目前主体的vue项目接口地址不一致，导致访问的时候跨域，找了很多解决方法，最后选择了通过nginx的配置来解决。

vue的主体项目线上访问地址是 https://a1.com   前端接口访问地址是 https://a1.com/api/

需要集成进来的子项目接口访问地址是https://b1.com/api 集成到主体项目后访问地址因此也是https://a1.com

这里 a1和b1的接口访问地址后缀都是api 因此子项目前端访问的时候后缀要改成videoApi(自己随便命名就行)作为区分 这样在nginx配置文件里面才会走不同的location配置

因为集成进来之后都是统一通过https://a1.com去访问的只是后面的路由地址不一样而已，因此在配置子项目的接口访问的时候也直接走https://a1.com访问接口 只是加了个 后缀来进行区分 https://a1.com/videoApi/ 这样就可以在 https://a1.com服务器上的nginx上进行转发到https://b1.com/api这个接口地址了。

因此只需要统一在https://a1.com的服务器上配置子项目的域名转发就行了

如下是主体项目 https://a1.com服务器 的nginx配置文件的配置 只需要增加     location /videoApi/ 的配置即可，具体配置如下：

 location /videoApi/ {//只需要增加这个配置即可 这是子项目的访问配置
           # 解决跨域问题
         if ($request_uri !~* /(record_proxy|zlm)/) {//这里是通过rewrite把videoAPi后缀重新换成api 因为子项目也是api后缀访问 用videoAPi是为了和主体项目区分 因为下面的api网关配置后缀就是api
          rewrite ^/videoApi/(.*)$ /api/$1 break;
        }
         # 检查请求路径是否包含 record_proxy 或 zlm
        if ($request_uri ~* /(record_proxy|zlm)/) {
            rewrite ^/videoApi/(.*)$ //$1 break;
        }
        proxy_pass https://b1.com/;//这是要代理到子项目真正的访问接口地址
        proxy_set_header Host b1.com;
        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;
    }
    #API 网关 这是主体项目的接口访问地址配置 后缀是api
    location /api/
    {  
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_pass http://127.0.0.1:8088/;   
    }

我的项目是直接新建了一个目录来放这个子项目的代码我的是 videoManage目录  因为是不同项目因此登录和token也不一样 这里单独写了个config.ts文件来配置访问地址和token处理的