使用Express部署React应用时CSS样式无法加载求助

我尝试用Express服务器部署React应用，前后端对接时遇到问题：JSX页面能正常运行，但CSS样式加载失败。

我的server.js代码如下：

const express = require("express");
const cors = require("cors");
const path = require("path");
const bodyParser = require("body-parser");
const cookieParser = require("cookie-parser");
require("dotenv").config({ path: "./config/.env" });
require("./config/db");
const { checkUser, requireAuth } = require("./middleware/auth.middleware");
const userRoutes = require("./routes/user.routes");
const messageRoutes = require("./routes/message.routes");
const app = express();
app.use(express.static(path.join(__dirname, "client/build")));
const corsOptions = {
  origin: process.env.CLIENT_URL,
  credentials: true,
  allowedHeaders: ["sessionId", "Content-Type"],
  exposedHeaders: ["sessionId"],
  methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
  preflightContinue: false,
};
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.json());
app.use(cookieParser());
app.use(cors(corsOptions));
// jwt
app.get("*", checkUser);
app.get("/jwtid", requireAuth, (req, res) => {
  res.status(200).send(res.locals.user._id);
});
app.use("/api/user", userRoutes);
app.use("/api/message", messageRoutes);
app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname + "/client/build/index.html"));
});
app.listen(process.env.PORT, () => {
  console.log(`listening on port ${process.env.PORT}`);
});

文件结构：

1. 调整静态资源中间件顺序 #

你当前的app.get("*", checkUser)会拦截所有GET请求，包括CSS等静态资源的请求，导致静态资源无法被正确返回。需要把静态资源中间件移到所有路由之前，确保静态资源请求优先被处理：

const app = express();

// 优先配置静态资源
app.use(express.static(path.join(__dirname, "client/build")));

// 再配置其他中间件和路由
const corsOptions = {
  origin: process.env.CLIENT_URL,
  credentials: true,
  allowedHeaders: ["sessionId", "Content-Type"],
  exposedHeaders: ["sessionId"],
  methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
  preflightContinue: false,
};
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.json());
app.use(cookieParser());
app.use(cors(corsOptions));

// jwt路由放在静态资源之后
app.get("*", checkUser);
app.get("/jwtid", requireAuth, (req, res) => {
  res.status(200).send(res.locals.user._id);
});

app.use("/api/user", userRoutes);
app.use("/api/message", messageRoutes);

app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname + "/client/build/index.html"));
});

2. 验证React构建产物路径 #

确认client/build目录下存在css文件夹及对应的样式文件。可以直接访问服务器上的CSS文件路径（比如http://你的域名/static/css/main.xxx.css），如果返回404，检查client/build的文件结构是否正确，或者调整express.static的路径参数。

3. 排查CORS配置影响 #

如果process.env.CLIENT_URL和部署后的服务器域名不一致，静态资源请求可能被CORS拦截。可以暂时将origin设为"*"测试，确认是否是CORS导致的问题，之后再调整为正确域名。

4. 移除重复的JSON解析中间件 #

代码中同时使用了bodyParser.json()和express.json()，两者功能重复，保留一个即可：

// 保留express.json()，删除bodyParser.json()
app.use(express.json());
// app.use(bodyParser.json());

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