使用http-proxy-middleware代理React应用出现MIME类型错误及白屏问题

问题根因 #

你遇到的报错是React应用静态资源路径配置错误导致的：

• 你直接访问http://localhost:4000时，React打包生成的index.html内引用的JS/CSS等静态资源路径是默认的根路径格式（比如/static/js/main.xxx.js），浏览器会从http://localhost:4000根路径请求资源，和你的4000端口静态服务匹配，所以加载正常。
• 当你通过http://localhost:3000/project1访问时，浏览器会以3000端口的根路径作为基准请求静态资源，也就是请求http://localhost:3000/static/js/main.xxx.js，这个路径没有匹配到你的代理规则（仅代理/project1前缀的请求），所以3000服务返回404错误，浏览器拿到404的HTML响应内容，和预期的JS/CSS MIME类型不符，就会报类型错误，页面因为没有加载到运行所需的JS资源所以空白。

解决方案 #

按以下步骤修改即可修复：

1. 修改React应用打包基准路径 #

如果你用的是Create React App脚手架，在React项目的package.json中新增homepage字段：

{
  "name": "your-project-name",
  "homepage": "/project1",
  // 其余配置不变
}

如果你用的是Vite脚手架，在vite.config.js/vite.config.ts中修改base配置：

export default defineConfig({
  base: '/project1/',
  // 其余配置不变
})

修改后重新执行npm run build打包，新生成的index.html内的静态资源路径会自动加上/project1前缀，变成/project1/static/js/main.xxx.js的格式。

2. （使用React Router时必须配置） #

给路由组件添加basename属性，匹配你的代理前缀：

// 旧写法
<BrowserRouter>
// 新写法
<BrowserRouter basename='/project1'>

避免前端路由跳转时路径异常。

3. （可选，优化代理配置） #

你当前的代理配置里pathRewrite写死了/project1前缀，后续新增其他项目时不方便，可以改成动态匹配路由配置的格式：

for (const route of routes) {
    app.use(route.route,
        createProxyMiddleware({
            target: route.address,
            pathRewrite: {
                [`^${route.route}`]: '/', // 动态匹配前缀重写
              },
              connection:'keep-alive'
        })
    );
}

修改完成后重启3000代理服务和4000端口的应用服务，再次访问http://localhost:3000/project1即可正常加载。

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