Express服务/player路由404报错 CRA项目其余接口调用正常如何排查

问题根因 #

1. Express端路由注册语法错误 #

你提供的服务端代码中，/player路由的注册存在语法错误：

// 错误写法：路径参数后多了右括号，回调函数未传入app.get
app.get("/player"), (req, res) => {
    // 业务逻辑
}

该写法等同于仅执行了app.get("/player")，没有将回调处理函数注册为路由逻辑，Express中没有对应的GET /player路由规则，因此直接访问localhost:3001/player会返回Cannot GET /player报错。

2. CRA代理配置未匹配/player路径 #

你客户端发起fetch("/player")时请求打到了localhost:3000而非Express的3001端口，说明当前CRA的代理规则没有覆盖/player路径：

• 你能正常请求/collection/tracks，是因为现有代理规则已经包含了/collection前缀的路径匹配，请求会被正常转发到3001端口
• /player不在代理匹配规则中，请求会被CRA的本地开发服务处理，自然找不到对应资源，返回404报错

修复步骤 #

1. 修复Express路由语法 #

将/player路由的代码修改为正确写法：

app.get("/player", (req, res) => {
    // 你的业务逻辑
})

修改后重启Express服务，此时直接访问localhost:3001/player即可得到正常响应。

2. 修正CRA代理配置 #

两种方案二选一即可：

• 方案一：使用package.json全局代理
  在CRA项目的package.json中添加配置：

  "proxy": "http://localhost:3001"
  

  重启CRA开发服务后，所有非静态资源的请求都会自动转发到3001端口，无需额外配置。
• 方案二：完善setupProxy.js匹配规则
  如果你需要更精细的代理控制，修改setupProxy.js将所有后端接口路径都加入匹配列表：

  const { createProxyMiddleware } = require('http-proxy-middleware');
  
  module.exports = function(app) {
    app.use(
      ['/login', '/callback', '/refresh_token', '/me', '/collection', '/player'],
      createProxyMiddleware({
        target: 'http://localhost:3001',
        changeOrigin: true,
      })
    );
  };
  

  该方案不会影响静态资源访问，且所有列出的路径前缀的请求都会转发到Express服务，不会出现部分接口异常的问题。

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