Express与React项目根路径访问出现404错误的技术求助

你遇到的核心问题有两个：一是根路由/没有对应的请求处理逻辑，二是服务器的静态文件目录配置不正确，导致React页面无法被正确加载。下面是具体的修复步骤：

1. 修正静态文件目录配置 #

你的server.js里把静态目录设为了__dirname（也就是server文件夹），但React打包后的bundle.js和入口页面应该在项目根目录的public文件夹下。需要把静态目录指向正确的位置：

修改server.js中的静态文件配置：

// 原代码
app.use(express.static(__dirname));
// 修改为（先引入path模块）
const path = require('path');
app.use(express.static(path.join(__dirname, '../public')));

2. 添加根路由的处理逻辑 #

现在访问/时，服务器不知道该返回什么内容，所以需要添加一个GET路由来返回React的入口页面index.html：

在server.js中新增根路由处理：

app.get('/', (req, res) => {
  // 指向public文件夹下的index.html文件
  res.sendFile(path.join(__dirname, '../public/index.html'));
});

完整修改后的server.js #

var express = require('express');
var bodyParser = require('body-parser');
const axios = require("axios");
const path = require('path'); // 引入path模块
var app = express();

// 修正静态文件目录为项目根目录下的public文件夹
app.use(express.static(path.join(__dirname, '../public')));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// 根路由返回React入口页面
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, '../public/index.html'));
});

app.get('/etf', (req, res) => {
  console.log('check')
  axios.get(`https://api.coindesk.com/v1/bpi/historical/close.json?start=2019-08-07&end=2020-08-06`)
    .then(response => res.send(response.data.bpi))
    .catch(err => console.log('error with app.get: ', err))
})

app.listen(3000, function () {
  console.log('listening on port 3000!');
});

module.exports = app;

补充说明 #

• 之前访问/etf没问题，是因为你专门为这个路径写了API响应逻辑，但根路径没有对应的处理，所以返回404。
• 修正静态目录后，浏览器才能正确加载public里的bundle.js和其他静态资源，React应用才能正常初始化运行。
• 记得先执行npm run react-dev或npm run build生成bundle.js到public目录，否则页面会缺少核心脚本。

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