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

【问题标题】：Node server response is HTML after adding catch-all to allow react-router to work添加 catch-all 以允许 react-router 工作后，节点服务器响应是 HTML
【发布时间】：2019-10-03 17:49:53
【问题描述】：

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

这似乎源于从服务器的端口和react-router访问应用程序的交互。我向我的服务器添加了一个包罗万象的端点 app.get('/*'...) 以允许 react-router 工作。所以现在前台请求数据的时候，响应的是HTML而不是我想要的数组。

我觉得有一个简单的解决方案，但我还没有看到它。我考虑使用 HashRouter 而不是 BrowserRouter，但不幸的是我无法使用它，因为我使用 MSAL Active Directory 进行登录。

服务器/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}`));

【问题讨论】：

标签： javascript node.js reactjs react-router

【解决方案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)
      }
    })
  })

【讨论】：

现在我觉得自己很笨。谢谢！