CRACO配置文件中devServer中间件配置方法及无鉴权导航需求处理咨询

Hey there! Let's work through your CRACO devServer middleware setup issue, and make sure you can get unauthenticated navigation working now while leaving room for future middleware additions.

First, the reason you're seeing a 404 error is because your initial code completely replaced the default devServer configuration object—this wiped out all the built-in middlewares that Create React App uses to handle routing, static files, and more. Instead of replacing the whole config, we need to modify it while preserving the default settings.

Here's the corrected full craco.config.js for your current needs: #

const {CracoAliasPlugin} = require('react-app-alias')

module.exports = {
  plugins: [
    {
      plugin: CracoAliasPlugin,
      options: {}
    }
  ],
  devServer: (devServerConfig, { env, paths }) => {
    // Deprecated hooks—we'll use setupMiddlewares instead, so clear these
    devServerConfig.onBeforeSetupMiddleware = undefined;
    devServerConfig.onAfterSetupMiddleware = undefined;
    
    // Configure setupMiddlewares while keeping default middlewares intact
    devServerConfig.setupMiddlewares = (middlewares, devServer) => {
      // 🚀 This is where you'll add custom middleware later
      // For example, here's a simple logging middleware you could add down the line:
      // devServer.app.use((req, res, next) => {
      //   console.log(`Incoming request: ${req.method} ${req.path}`);
      //   next();
      // });
      
      // Critical: Return the default middlewares to keep CRA's core functionality
      return middlewares;
    };
    
    return devServerConfig;
  }
}

Key tips to keep in mind: #

• Never fully replace the devServerConfig object: Modify its properties instead. This ensures you don't lose essential default middlewares like historyApiFallback (which fixes SPA routing 404s when refreshing pages).
• Keep the middlewares array intact: The setupMiddlewares function receives CRA's default middleware list as the first argument—always return this array (you can add new middleware to it if needed).
• Future middleware additions: When you need to add authentication, logging, or API mocking later, use devServer.app.use() inside the setupMiddlewares function to mount your custom logic. This integrates seamlessly with the existing devServer setup.
• SPA routing safety: The default historyApiFallback middleware is already included in the middlewares array, so your React Router navigation (like BrowserRouter) will work without authentication blocks right now.

This setup will fix your 404 error, let you navigate without authentication requirements today, and give you a clean place to add middleware functionality later.

备注：内容来源于stack exchange，提问作者Hid