如何实现作为其他URL树代理的JavaScript应用？寻求简化方案

你的需求是做一个带认证的网页代理，把子路径映射到目标站点，其实不用React+React Router也能搞定，下面是几个更简单的实现方案：

1. 纯前端iframe方案（最省事） #

直接用iframe承载目标页面，动态拼接URL路径就行，如果需要附加认证信息，也能简单处理。

实现思路： #

• 提取当前URL里的子路径（去掉域名和/my-app前缀）
• 把这个子路径拼到目标站点的基础地址上
• 要么直接用iframe加载拼接后的地址，要么通过fetch带认证头获取内容再渲染（注意CORS限制）

代码示例： #

// 获取当前页面的相对路径
const getRelativePath = () => {
  const basePath = '/my-app';
  return window.location.pathname.replace(basePath, '') || '/';
};

// 目标站点基础地址
const targetBaseUrl = 'https://other.domain/my/other/path';
const targetUrl = new URL(getRelativePath(), targetBaseUrl);

// 方式1：直接用iframe加载整个页面
const iframe = document.createElement('iframe');
iframe.src = targetUrl.toString();
iframe.style.width = '100%';
iframe.style.height = '100vh';
iframe.border = '0';
document.body.appendChild(iframe);

// 方式2：带认证头请求页面内容再渲染（需目标站点允许你的域名跨域）
async function loadWithAuth() {
  const authToken = '你的认证令牌';
  const resp = await fetch(targetUrl, {
    headers: { 'Authorization': `Bearer ${authToken}` }
  });
  document.body.innerHTML = await resp.text();
}
// loadWithAuth();

2. 原生JS路由（无框架依赖） #

如果需要更灵活控制路由跳转，不用装任何框架，原生JS就能处理路由变化，核心逻辑和你的伪代码一致。

代码示例： #

const targetBaseUrl = 'https://other.domain/my/other/path';
const basePath = '/my-app';

// 渲染页面核心逻辑
async function renderPage() {
  const relPath = window.location.pathname.replace(basePath, '') || '/';
  const targetUrl = new URL(relPath, targetBaseUrl);
  
  // 携带认证信息请求目标页面
  const resp = await fetch(targetUrl, {
    headers: { 'Authorization': 'Bearer 你的认证令牌' }
  });
  
  const appEl = document.getElementById('app');
  if (resp.ok) {
    appEl.innerHTML = await resp.text();
  } else {
    appEl.innerHTML = '<h1>页面加载失败</h1>';
  }
}

// 监听浏览器前进后退事件
window.addEventListener('popstate', renderPage);

// 初始化加载页面
renderPage();

// 处理页面内链接跳转（避免刷新）
document.addEventListener('click', (e) => {
  const link = e.target.closest('a');
  if (link?.href.startsWith(window.location.origin + basePath)) {
    e.preventDefault();
    const path = link.href.replace(window.location.origin + basePath, '');
    window.history.pushState({}, '', `${basePath}${path}`);
    renderPage();
  }
});

3. 后端代理方案（最可靠，解决跨域问题） #

如果目标站点没开CORS允许你的域名，前端直接fetch会报错，这时候后端代理是最优解，用Node.js或者Nginx都能快速实现：

Node.js+Express示例： #

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();

// 代理所有/my-app下的请求到目标站点
app.use('/my-app', createProxyMiddleware({
  target: 'https://other.domain/my/other/path',
  changeOrigin: true,
  pathRewrite: { '^/my-app': '' },
  // 给代理请求附加认证头
  onProxyReq: (proxyReq) => {
    proxyReq.setHeader('Authorization', 'Bearer 你的认证令牌');
  }
}));

app.listen(3000, () => console.log('代理服务启动在3000端口'));

Nginx配置示例： #

server {
  listen 443 ssl;
  server_name my.host;

  location /my-app/ {
    proxy_pass https://other.domain/my/other/path/;
    # 附加认证头
    proxy_set_header Authorization "Bearer 你的认证令牌";
    proxy_set_header Host other.domain;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

为啥不推荐React+React Router？ #

不是不能用，而是有点“大材小用”：

• React是用来构建复杂单页应用的，你的需求只是简单的路由映射和内容渲染，完全不需要组件化开发的能力
• React Router的配置和依赖会额外增加项目复杂度，没必要为这点需求搭个React项目

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