The problem of Invalid Host header occurred in Nginx proxy Vue project and its solution

illustrate

Using NginxupstreamrightVueWhen the project is load balancing, the agent's address cannot access the target address

And the page error:

Invalid Host header

analyze

Check Nginx'sThe configuration is as follows:

upstream sail{
	server 127.0.0.1:8080;
}

server {
	listen       8081;
	server_name  localhost;
	
	location / {
    	root   html;
    	index   ;
    	proxy_pass http://sail;
    }
}

After repeated checks, there is no problem, and the problem at the Nginx level is ruled out.

That can only be a problem with Vue project configuration, and finally found out that it was due to Vue'sHost check configurationCause.

solve

1. Find the Vue projectbuildIn the directorydocument.
2. existdevServerAdddisableHostCheck: true, that is, skip the check, so that the host check will not be performed when accessing the Vue project.
3. Restart the project.

By accessing again, you can proxy to the destination address.

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.