Express 不加载页面只返回 json

Question

重新加载页面后出现问题，服务器只返回json而不是该页面

我正在使用 React 并从 build 文件夹返回静态文件，还有 express 句柄路由，它仅在运行 localhost 时在生产模式下重现，一切正常

app.use('/auth', authRoutes);
app.use('/user', userRoutes);
app.use(['/dota2', '/csgo', '/lol'], generalRoutes);

if (process.env.REACT_APP_ENV === 'production') {
  console.log('Production is running');
  app.use('/', express.static(path.join(__dirname, '../build')));
  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, '../build', 'index.html'));
  });
}

有路线

const router = Router();

router.get('/live', liveMatches);
router.get('/upcoming', upcomingMatches);
router.get('/past', pastMatches);
router.get('/:matchId', getMatchById);
router.get('/opponents/:tournamentId', opponents);
router.post('/past-team-matches', pastTeamMatches);

您可以访问mySite，您会看到 json 作为结果，但如果您清除 URL 中的 ma​​tchId 并单击任何匹配项，页面将正常加载

还有react-router

<ServiceRoute
            key={key}
            path={['/dota2', '/csgo', '/lol']}
            exact
            access
            component={Matches}
          />
          <ServiceRoute
            key={key}
            path={['/dota2/:matchId', '/csgo/:matchId', '/lol/:matchId']}
            exact
            access
            component={MatchInfo}
          />

Answer 1

让我们按照 express 在这种情况下所做的路由匹配：

1. 查找/dota2/566624时，会匹配到这里：app.use(['/dota2', '/csgo', '/lol'], generalRoutes);并返回JSON。
2. 在查找 /dota2 时，它不会匹配 app.use(['/dota2', '/csgo', '/lol'], generalRoutes);，因此它将继续向下直到匹配 app.get('*', (req, res) => {，服务于 React 页面。

我在这里看到的问题是，您对 API 和 React 上的前端路由使用了完全相同的路由。理想情况下，当从同一服务器提供 API 和前端应用程序时，您应该为 API 路由添加前缀，这样它们就不会与前端路由冲突。假设您为 API 路由添加前缀：/api。现在我们有了：

app.use('/api/auth', authRoutes);
app.use('/api/user', userRoutes);
app.use(['/api/dota2', '/api/csgo', '/api/lol'], generalRoutes);

// ... everything is the same down here

1. /api/dota2/566624。将匹配在第一次加载时返回 JSON 的端点。
2. /dota2/566624。将与 JSON 端点不匹配，并将遵循加载 React 应用程序的 '*' 路由，稍后，一旦加载应用程序，该路由将由您在 react 应用程序上使用的路由器处理。

不要像我在上面的示例中那样添加前缀，也可以使用您一直用于此目的的const router = Router();。我对前缀进行了硬编码，以便让示例保持简短。

最后一个问题是：为什么在开发过程中没有发生这种情况？ 我没有所有信息，但据我所知，您正在从与运行 API 的服务器不同的服务器上为前端应用程序提供服务；在这种情况下，您不会遇到路由冲突，因为它们是来自不同端口的服务器，例如在 localhost:8080 上服务的前端和在localhost:5000 上服务的 API。

我希望这会有所帮助！如果您需要信息，请发表评论！