Invalid Host header vue

To resolve the "Invalid Host header" issue in a Vue.js application, you can follow the steps outlined below:

  1. Step 1: Open the package.json file in the root directory of your Vue.js project.

  2. Step 2: Locate the "scripts" section within the package.json file. This section contains the commands that can be executed using npm or yarn.

  3. Step 3: Find the "start" script in the "scripts" section. This script is responsible for starting the development server.

  4. Step 4: Add the --disable-host-check flag to the "start" script. The modified script should look like this:

json "scripts": { "start": "vue-cli-service serve --disable-host-check" }

By adding this flag, you are disabling the host header check in the development server. This allows requests from different hosts to be accepted, which resolves the "Invalid Host header" error.

  1. Step 5: Save the package.json file.

  2. Step 6: Restart the development server by running the npm start or yarn start command in your project's root directory.

By following these steps, you should be able to resolve the "Invalid Host header" issue in your Vue.js application. The modification in the package.json file allows the development server to accept requests from different hosts without validating the host header. This is useful in development environments where you may need to access the application from multiple domains or hosts.