无webpack.config.js时，create-react-app中如何添加disableHostCheck？

Hey there! Let's tackle that frustrating "Invalid Host header" error you're facing with your Create React App project. Since CRA hides all the webpack configuration by default (which is why you don't see a webpack.config.js file), you don't need to mess with manual config edits—here are three reliable solutions:

1. Use Environment Variables (Quickest Fix) #

CRA lets you adjust host settings directly via environment variables, no config files required:

• Allow a specific host: Modify your start script in package.json to set the HOST variable to your allowed domain. For cross-platform compatibility, install cross-env first with npm install cross-env --save-dev, then update the script:

  "scripts": {
    "start": "cross-env HOST=your-trusted-domain.com react-scripts start",
    // ... other scripts
  }
  

• Disable host check entirely (local dev only): If you just need to bypass the check during development, use the DANGEROUSLY_DISABLE_HOST_CHECK variable. Important: This is unsafe for production—only use this locally!

  "scripts": {
    "start": "cross-env DANGEROUSLY_DISABLE_HOST_CHECK=true react-scripts start",
    // ... other scripts
  }
  

2. Customize Config with react-app-rewired (No Eject Required) #

If you want more control without ejecting your CRA project, use react-app-rewired to override webpack dev server settings:

1. Install the required packages:

   npm install react-app-rewired customize-cra --save-dev
   

2. Create a config-overrides.js file in your project root with this code:

   const { override, devServer } = require('customize-cra');
   
   module.exports = override(
     devServer(config) {
       // Enable disableHostCheck to fix the Invalid Host header error
       config.disableHostCheck = true;
       return config;
     }
   );
   

3. Update your package.json scripts to use react-app-rewired instead of react-scripts:

   "scripts": {
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test",
     "eject": "react-scripts eject"
   }
   

3. Eject the Project (Last Resort) #

Ejecting will expose all CRA's underlying config files (including webpack.config.js), but this is irreversible—you'll lose access to future CRA updates. If you still want to go this route:

1. Run the eject command:

   npm run eject
   

2. Open the newly generated webpack.config.js, find the devServer section, and add:

   devServer: {
     // ... existing devServer settings
     disableHostCheck: true,
   }
   

To answer your original question: Create React App is designed to work without needing manual webpack config edits for most use cases. The solutions above let you fix the host header error without breaking CRA's default workflow.

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