生产环境API返回index.html而非JSON数据的问题求助

生产环境调用API时，接口能正常请求，但返回的是index.html文件而非预期的JSON数据；开发环境下可以正常获取后端JSON数据。之前因reducers文件问题出现过白屏，现在路由到/login时问题依然存在。

const app = require("./backend/app.js");
const path = require('path');
const express = require("express");
const dotenv = require('dotenv');
const connectDatabase = require("./backend/config/database.js");
const cloudinary = require('cloudinary');
dotenv.config({path : "/Users/kapil/Documents/Ecommerce/backend/config/.env"});
const PORT = process.env.PORT || 4000;

// UncaughtException Error
process.on('uncaughtException', (err) => {
console.log(`Error: ${err.message}`);
process.exit(1);
});

connectDatabase();

// deployment
__dirname = path.resolve();
if (process.env.NODE_ENV === 'production') {
app.use(express.static(path.join(__dirname, './frontend/build')))

    app.get('/*', (req, res) => {
        res.sendFile(path.resolve(__dirname, './frontend/build/index.html'))
    });

} else {
app.get('/', (req, res) => {
res.send('Server is Running!');
});
}

cloudinary.config({
cloud_name: process.env.CLOUDINARY_NAME,
api_key: process.env.CLOUDINARY_API_KEY,
api_secret: process.env.CLOUDINARY_API_SECRET,
});

app.listen(PORT , () => {
console.log(`server working on http://localhost:${PORT}`);
})

// Unhandled Promise Rejection
process.on('unhandledRejection', (err) => {
console.log(`Error: ${err.message}`);
server.close(() => {
process.exit(1);
});
});

问题根源 #

当前代码在生产环境下，先挂载了前端静态资源，紧接着用app.get('/*')匹配所有GET请求——这会包含你的API接口请求。所以客户端调用API时，服务器直接返回index.html，而非转发到后端API路由处理逻辑。

解决步骤 #

1. 调整路由顺序：把后端API路由的加载放在静态资源和catch-all路由之前。确保require("./backend/app.js")（假设该文件定义了所有API路由）在生产环境的静态资源配置和app.get('/*')之前执行，修改后结构如下：

   connectDatabase();
   
   // 先加载API路由
   const app = require("./backend/app.js");
   
   // 再处理生产环境的静态资源和前端路由
   __dirname = path.resolve();
   if (process.env.NODE_ENV === 'production') {
     app.use(express.static(path.join(__dirname, './frontend/build')))
   
     app.get('/*', (req, res) => {
       res.sendFile(path.resolve(__dirname, './frontend/build/index.html'))
     });
   } else {
     app.get('/', (req, res) => {
       res.send('Server is Running!');
     });
   }
   

   若API路由是通过app.use('/api', ...)这类带前缀的方式定义的，也可以不用调整顺序，但最稳妥的方式还是把API路由放在前面。

2. 区分API与前端路由：给所有API统一加上/api前缀（比如/api/login），让服务器能明确区分API请求和前端路由请求，避免路径冲突。

3. 修复语法错误：unhandledRejection处理代码存在语法问题，同时server变量未定义，应改为用app，修正后代码：

   process.on('unhandledRejection', (err) => {
     console.log(`Error: ${err.message}`);
     app.close(() => {
       process.exit(1);
     });
   });
   

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