MERN栈请求根路径"/"报错 其余路由正常问题排查求助

请求根路径/时，React开发服务器未将请求转发至4000端口的Express服务，直接返回了React应用自身的入口HTML文件，因此触发JSON解析错误：HTML文件以<!DOCTYPE html>开头，首字符就是<，对应报错Unexpected token < in JSON at position 0。
所有排查现象均能印证该结论：

• 调用useFetch('/')时Express控制台无请求日志，证明请求未到达后端
• 该请求返回的content-type为text/html，正是HTML页面的响应类型
• /admin及其他CRUD接口路径与前端静态资源路径不冲突，会正常走代理转发到后端，因此可正常返回JSON
• 直接在浏览器访问http://localhost:4000/可正常拿到后端返回，是因为请求直接打向后端端口，未经过React开发服务器代理

二选一即可，优先推荐方案1，稳定性更高。

方案1：给后端接口统一加访问前缀 #

不要将后端接口直接挂载在根路径/，给所有后端接口加统一前缀（比如/api），避免和前端静态资源路径冲突。
Express侧调整路由挂载逻辑：

// 原挂载逻辑
// app.use('/', indexRouter)
// app.use('/admin', adminRouter)

// 调整为统一前缀
app.use('/api', indexRouter)
app.use('/api/admin', adminRouter)

前端请求对应修改路径即可：

// 原请求useFetch("/")调整为
const {data, isPending, error} = useFetch("/api");
// /admin请求调整为
const {data, isPending, error} = useFetch("/api/admin");

方案2：自定义React代理规则实现精确转发 #

如果不想修改后端路径，放弃package.json中简单的proxy配置，改用代理中间件做精确路径匹配：

1. 安装依赖：

npm install http-proxy-middleware --save-dev

2. 在React项目src目录下新建setupProxy.js文件，配置转发规则：

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

module.exports = function(app) {
  app.use(
    '/',
    createProxyMiddleware({
      target: 'http://localhost:4000',
      changeOrigin: true,
      // 排除前端静态资源请求，避免页面加载异常
      bypass: function(req) {
        const isStaticResource = 
          req.headers.accept?.includes('html') ||
          req.path.startsWith('/static') ||
          ['/manifest.json', '/favicon.ico'].includes(req.path);
        return isStaticResource ? req.path : null;
      }
    })
  );
};

之前尝试调整express.json()中间件的操作和本问题无关，该中间件仅用于解析POST/PUT等请求的请求体JSON，本次问题的核心是请求根本未到达后端，和请求体解析逻辑没有关联。

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