Invalid Host header Vue3

Question

Just uploaded project files and configured nginx. Everything seems working fine without any errors. However, whenever I visit the domain I see the message 'Invalid Host header'. Followed by many solutions with vue.config.js file, none of them did a trick. The file is created in the same root level with package.json and src folder. Here's how it looks:

module.exports = {
   devServer: {
        disableHostCheck: true
    }
};

Also, tried this solution:

devServer: {
    allowedHosts: [
      'yourdomain.com'
    ]
}

Here's the part from the /sites-available file

server {
        location / {
        proxy_pass http://localhost:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        }
    }

Did you try everything from this post? https://stackoverflow.com/questions/51084089/vuejs-app-showing-invalid-host-header-error-loop — Kshitij Joshi, Aug 26 '22 at 14:30

score 0 · Accepted Answer · answered Aug 28 '22 at 17:05

0

For some reasons the project always been running on 8081 port, just had to check logs more carefully. Updating proxy_pass solved it

answered Aug 28 '22 at 17:05

henrbu

137
10

What did you update proxy_pass to? – opyate Jan 04 '23 at 09:44
1

Instead of http://localhost:8080 I changed it to http://localhost:8081. Take a look at your logs to check on which port your project is running and then set proxy_pass. – henrbu Jan 05 '23 at 10:10

Invalid Host header Vue3

1 Answers1