开发环境下基于localhost创建子域名href链接的方案

当然可以实现！这种开发环境下的跨应用跳转问题非常常见，咱们可以通过本地hosts映射+Angular代理配置的组合方案完美解决，完全适配你的需求。

第一步：修改本地Hosts文件，把子域名指向localhost #

首先要让你的开发机器把生产环境的子域名解析到本地，这样点击链接时不会真的去访问线上地址：

• 找到Hosts文件位置：
  • Windows：C:\Windows\System32\drivers\etc\hosts
  • Mac/Linux：/etc/hosts
• 用管理员权限打开文件，添加一行映射：

  127.0.0.1 app2.apps.com
  

• 保存后刷新DNS缓存生效：
  • Windows：打开命令提示符执行 ipconfig /flushdns
  • Mac/Linux：终端执行 sudo dscacheutil -flushcache

第二步：配置Angular代理规则，转发子域名请求到对应端口 #

在你的App1项目根目录下创建（或修改）proxy.conf.json文件，添加针对子域名的转发规则：

{
  "/": {
    "target": "http://localhost:50001",
    "secure": false,
    "changeOrigin": true,
    "hostRewrite": true,
    "router": {
      "app2.apps.com": "http://localhost:50001"
    }
  }
}

关键配置说明：

• router：匹配请求的主机名，当检测到请求来自app2.apps.com时，自动转发到指定的本地端口
• changeOrigin：确保转发请求时的Host头被修改为目标服务器的Host，避免后端校验失败
• hostRewrite：重写响应中的Location头，防止跳转后出现错误的域名

如果有多个子域名应用（比如app3.apps.com指向localhost:50002），只需要在router里扩展规则即可：

"router": {
  "app2.apps.com": "http://localhost:50001",
  "app3.apps.com": "http://localhost:50002"
}

第三步：启动App1时加载代理配置 #

修改项目根目录package.json里的启动脚本，添加代理参数：

"scripts": {
  "start": "ng serve --proxy-config proxy.conf.json"
}

之后运行 npm start 启动App1，现在点击App1里的<a href="app2.apps.com">App2</a>链接，就会自动跳转到localhost:50001上运行的App2了。

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