添加catch-all以允许react-router工作后，节点服务器响应为HTML

Question

我已经开发了一个节点后端，反应前端web应用程序几个月了。当我通过nodemon启动服务器，使用npm start启动前端时，它工作得很好。但现在我已经准备好托管一个alpha版本并运行'npm run build‘，我遇到了一些问题。

这似乎源于从服务器端口和react-router访问应用程序的交互。我添加了一个通用终结点app.get('/*'...)连接到我的服务器，让react-router正常工作。所以现在当前端请求数据时，响应是HTML而不是我想要的数组。

我觉得这个问题有一个简单的解决方案，但我还没有看到它。我考虑过使用HashRouter而不是BrowserRouter，但不幸的是我不能使用它，因为我正在使用MSAL Active Directory登录。

server/index.js

​

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors')
require('dotenv').config();
const massive = require('massive');
const session = require("express-session");
const morgan = require('morgan');
const path = require('path');
const ctrl = require(`./controllers/controller.js`);

//Middleware
const app = express();
app.use(bodyParser.json());
app.use(cors());
app.use(express.static(__dirname + './../build'));
app.use(morgan('dev'));

//Connection to Azure DB
massive(process.env.CONNECTION_STRING)
.then(db => {
    console.log('Connected to Azure PostgreSQL Database')
    app.set('db', db)
}).catch(err=>console.log(err))

app.use(session({
    secret: process.env.SESSION_SECRET, 
    cookie: { maxAge: 60000 },
    resave: false,
    saveUninitialized: true
   })); 
 
//Endpoints
app.get('/*', function(req, res) {
    res.sendFile(path.join(__dirname, './../build/index.html'), function(err) {
      if (err) {
        res.status(500).send(err)
      }
    })
  })

app.get('/getallemployees/', ctrl.getAllEmployees)

app.listen(8080, () => console.log(`Listening on ${8080}`));

​

Answer 1

将捕获所有端点放在所有其他返回数据的端点之后。

//Endpoints
app.get('/getallemployees/', ctrl.getAllEmployees)

app.get('/*', function(req, res) {
   res.sendFile(path.join(__dirname, './../build/index.html'), function(err) {
      if (err) {
        res.status(500).send(err)
      }
    })
  })