Angular本地服务能否不显示端口？多应用同域本地测试问询

你的场景是线上多个应用部署在同域名不同路径（company.myapp.com/app1、company.myapp.com/app2等），依赖同域名的LocalStorage/Cookie功能；但本地开发时每个应用跑在不同端口（localhost:4200/app1等），导致域名+端口组合不同，无法正常测试相关功能。下面是几种可行的配置方案：

方案1：反向代理服务器（最匹配线上环境） #

用Nginx或Caddy这类工具做反向代理，把同一个域名下的不同路径转发到本地不同端口的应用上，这样所有应用都通过mylocalapps.com访问，不用加端口，完全复刻线上的域名结构。

Nginx配置步骤： #

1. 修改本地hosts文件，把mylocalapps.com指向本地IP：

127.0.0.1 mylocalapps.com

2. 编辑Nginx的服务器配置（比如nginx.conf或者站点配置文件）：

server {
    listen 80;
    server_name mylocalapps.com;

    # 把/app1路径转发到localhost:4200
    location /app1 {
        proxy_pass http://localhost:4200;
        proxy_set_header Host $host;
    }

    # 把/app2路径转发到localhost:4300
    location /app2 {
        proxy_pass http://localhost:4300;
        proxy_set_header Host $host;
    }

    location /app3 {
        proxy_pass http://localhost:4400;
        proxy_set_header Host $host;
    }

    location /app4 {
        proxy_pass http://localhost:4500;
        proxy_set_header Host $host;
    }
}

3. 重启Nginx，之后直接访问mylocalapps.com/app1、mylocalapps.com/app2即可，所有应用共享同一域名，LocalStorage/Cookie能正常生效。

Caddy配置步骤（更简洁）： #

Caddy无需手动处理证书，配置文件Caddyfile内容如下：

mylocalapps.com {
    reverse_proxy /app1/* localhost:4200
    reverse_proxy /app2/* localhost:4300
    reverse_proxy /app3/* localhost:4400
    reverse_proxy /app4/* localhost:4500
}

启动Caddy后，直接访问上述路径即可。

方案2：开发服务器代理配置（单入口联动） #

如果你的应用用Webpack、Vite这类构建工具，可以在其中一个应用的开发服务器里配置代理，把其他应用的路径转发到对应端口。比如在app1的Vite配置中添加：

// vite.config.js
export default {
  server: {
    proxy: {
      '/app2': {
        target: 'http://localhost:4300',
        changeOrigin: true
      },
      '/app3': {
        target: 'http://localhost:4400',
        changeOrigin: true
      },
      '/app4': {
        target: 'http://localhost:4500',
        changeOrigin: true
      }
    }
  }
}

配置完成后，访问localhost:4200/app2会自动转发到localhost:4300/app2，所有应用都通过localhost:4200下的不同路径访问，实现同端口同域名的共享。

方案3：子域名映射+端口转发（适合简单场景） #

修改hosts文件添加多个子域名指向本地：

127.0.0.1 app1.mylocalapps.com
127.0.0.1 app2.mylocalapps.com
127.0.0.1 app3.mylocalapps.com
127.0.0.1 app4.mylocalapps.com

然后用端口转发工具把80端口转发到对应应用端口（比如Windows用netsh interface portproxy add v4tov4 listenport=80 listenaddress=app1.mylocalapps.com connectport=4200 connectaddress=127.0.0.1）。不过这种方式下，子域名的LocalStorage/Cookie默认不共享，需要手动设置Cookie的domain为.mylocalapps.com才能生效，不如反向代理方案直接。

内容的提问来源于stack exchange，提问作者dcp3450