Express服务React应用遇样式MIME类型错误及CRA公共URL问题

Hey MarcoLe, let's break down your problem step by step—this is a super common issue when deploying React apps with Express, so you're not alone!

First: The Conceptual Mistake #

You're hitting a mismatch between CRA's public base path configuration and your Express server's routing setup. Here's what's happening:

• CRA automatically generates resource URLs (like for CSS, favicons) based on the homepage field in your package.json. If this field is set to /BYOD, CRA will prepend all static asset paths with /BYOD.
• But if your Express server isn't configured to map the /BYOD path to your build folder, when the browser requests http://192.168.145.135:3000/BYOD/static/css/..., the server can't find the file and falls back to returning index.html (which has a text/html MIME type). Browsers reject stylesheets with this MIME type, hence the error.

Either you accidentally set the wrong homepage value (if you meant to deploy at the root /), or your Express server isn't handling the /BYOD subpath correctly (if you do need to deploy there).

How to Fix the Problem #

Let's cover both scenarios:

Scenario 1: You want to deploy at the root (/) #

1. Fix CRA's configuration: Open your project's package.json and remove the "homepage": "/BYOD" line, or set it to "homepage": "/" (which is the default if you omit the field entirely).
2. Rebuild your app: Run npm run build—this will generate a new build folder where all resource URLs are root-based (like /favicon.ico or /static/css/main...css).
3. Update your Express server to serve the build folder correctly:

   const express = require('express');
   const path = require('path');
   const app = express();
   
   // Serve all static files from the build directory
   app.use(express.static(path.join(__dirname, 'build')));
   
   // Fallback route for SPA (return index.html for all non-static requests)
   app.get('*', (req, res) => {
     res.sendFile(path.join(__dirname, 'build', 'index.html'));
   });
   
   app.listen(3000, () => {
     console.log('Server running on http://192.168.145.135:3000');
   });
   

Scenario 2: You need to deploy at the /BYOD subpath #

1. Confirm CRA's configuration: Keep "homepage": "/BYOD" in your package.json—this is actually correct for subpath deployment, as it tells CRA to prepend all assets with /BYOD.
2. Rebuild your app with npm run build—the index.html will now have URLs like /BYOD/favicon.ico, which is what we want.
3. Adjust your Express server to map /BYOD to the build folder:

   const express = require('express');
   const path = require('path');
   const app = express();
   
   // Serve static assets under the /BYOD path
   app.use('/BYOD', express.static(path.join(__dirname, 'build')));
   
   // Handle all routes under /BYOD with index.html (SPA fallback)
   app.get('/BYOD/*', (req, res) => {
     res.sendFile(path.join(__dirname, 'build', 'index.html'));
   });
   
   // Optional: Redirect root requests to /BYOD if needed
   app.get('/', (req, res) => {
     res.redirect('/BYOD');
   });
   
   app.listen(3000, () => {
     console.log('Server running on http://192.168.145.135:3000');
   });
   

How to Avoid This in the Future #

• Never manually edit the build/index.html: CRA overwrites this file every time you run npm run build, so any manual changes will be lost. Always control asset paths via the homepage field in package.json.
• Set homepage correctly based on your deployment target:
  • Root directory: Omit the homepage field, or set it to "homepage": "/".
  • Specific subpath: Set "homepage": "/your-subpath".
  • Relative path (for flexible deployment, e.g., any subdirectory): Set "homepage": "."—this generates relative asset URLs like ./static/css/... that work regardless of where you host the app.

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