开发环境下如何从端口5173的React前端跳转至端口5174的React仪表盘？

硬编码URL的方式在环境切换时容易出错，且不够灵活，以下是几种专业的实现方案：

1. 环境变量配置 #

通过环境变量统一管理不同环境下的仪表盘地址，彻底避免硬编码：

• 在前端项目的.env文件中配置开发环境地址：

  REACT_APP_DASHBOARD_URL=http://localhost:5174/dashboard
  

• 生产环境单独创建.env.production，替换为正式部署地址即可，代码无需改动
• 在组件中直接读取变量使用：

  <a href={process.env.REACT_APP_DASHBOARD_URL} target="_blank" rel="noopener noreferrer">
    进入仪表盘
  </a>
  

2. 后端统一提供配置 #

让后端接口返回应用路由配置，前端动态获取地址：

• 后端新增配置接口（如/api/app-config），返回格式示例：

  {
    "dashboardUrl": "http://localhost:5174/dashboard"
  }
  

• 前端初始化时请求该接口，将地址存入状态或全局存储：

  const [dashboardUrl, setDashboardUrl] = useState('');
  
  useEffect(() => {
    fetch('/api/app-config')
      .then(res => res.json())
      .then(config => setDashboardUrl(config.dashboardUrl));
  }, []);
  
  return (
    <a href={dashboardUrl} target="_blank" rel="noopener noreferrer">
      进入仪表盘
    </a>
  );
  

  这种方案的优势是后端可动态调整地址，前端无需重新部署。

3. 反向代理（开发+生产通用） #

开发环境配置 #

在Vite/Webpack的配置文件中设置反向代理，将仪表盘路径映射到目标端口：

// vite.config.js
export default {
  server: {
    proxy: {
      '/dashboard': {
        target: 'http://localhost:5174',
        changeOrigin: true
      }
    }
  }
};

此时前端直接使用相对路径跳转即可：

<a href="/dashboard" target="_blank" rel="noopener noreferrer">
  进入仪表盘
</a>

生产环境配置 #

在Nginx等服务器上配置反向代理，将主域名下的/dashboard路径指向仪表盘应用：

location /dashboard {
  proxy_pass http://your-dashboard-server:port;
  proxy_set_header Host $host;
}

用户访问主站的/dashboard会自动跳转到仪表盘应用，无需暴露端口信息。

4. 登录状态同步跳转 #

如果两个应用需要共享登录状态，跳转时需同步身份凭证：

• 前端登录后，将认证凭证（如JWT）通过URL参数传递（仅HTTPS环境下使用，避免泄露）：

  const token = localStorage.getItem('authToken');
  <a href={`${process.env.REACT_APP_DASHBOARD_URL}?token=${token}`} target="_blank" rel="noopener noreferrer">
    进入仪表盘
  </a>
  

• 仪表盘应用接收参数后，验证凭证并建立本地会话。

关键注意事项 #

• 跳转时必须添加target="_blank"和rel="noopener noreferrer"，防止钓鱼攻击等安全漏洞
• 生产环境优先使用统一域名下的路径映射（反向代理），而非跨端口直接访问，提升用户体验与安全性

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