Invalid Host header vue
To resolve the "Invalid Host header" issue in a Vue.js application, you can follow the steps outlined below:
Step 1: Open the
package.json
file in the root directory of your Vue.js project.Step 2: Locate the
"scripts"
section within thepackage.json
file. This section contains the commands that can be executed using npm or yarn.Step 3: Find the
"start"
script in the"scripts"
section. This script is responsible for starting the development server.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.
Step 5: Save the
package.json
file.Step 6: Restart the development server by running the
npm start
oryarn 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.