Causes and solutions for accessing white screens in Nginx configuration

The problem appears again

When jumphttp://xxxxx/your/pathWhen the white screen is displayed

But normal accesshttp://xxxxxThe path is displayed normally

Because vue developed for spa applications. Package the dist file

dist
- css file
- html file
- Static folder

After that, the configuration will be performed in nginx

server {
    	listen 80;

    	location /apiset/ { //Interface request            proxy_pass http://x x x x:3000/apiset/;
            proxy_set_header Host $host:$server_port;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
       
    	location / {
      	    root /your/html/path;
            try_files $uri $uri/ /;
            add_header Cache-Control "no-cache, no-store, must-revalidate";
        	add_header Pragma "no-cache";
        	add_header Expires 0;
            ;
        }
        
    }

Cause of the problem

When visitinghttp://xxxxx/your/pathReturns an html file, and accesses css js based on the internal link and script tags. The problem lies in this section

<!doctype html>
<html lang="en">
  <head>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="./static/" rel="external nofollow"  />
    <link rel="stylesheet" href="./static/" rel="external nofollow"  />
    <title>xxxx</title>
 
    
  </head>
  <body>
    <div >
      <div ></div>
    </div>
    
    
  </body>
</html>

At this time, the css path accessed on html is the relative path. In the vite configuration, it is the base property, and the base property is ''

When the accessed path is http://xxxxx/your/path

Interpretation as

Because the packaging structure does not have the 'your' folder, the file cannot be found. Try_files uriuri uriuri/ / The rule changes the css/js file that should be obtained to return the html file, resulting in a white screen problem.

solve

Modify the internal relative path to absolute path, or rewrite nginx configuration

vite
export default (_configEnv: ConfigEnv): UserConfigExport => {
 

  return {
    base: "/",
    。。。
 
  }
}

nginx

server {
    	listen 80;

    	location /apiset/ { //Interface request            proxy_pass http://x x x x:3000/apiset/;
            proxy_set_header Host $host:$server_port;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
       
    	location / {
      	    root /your/html/path;
            try_files $uri $uri/ /;
            add_header Cache-Control "no-cache, no-store, must-revalidate";
            add_header Pragma "no-cache";
            add_header Expires 0;
            rewrite ^/your/(.*)$ /$1 break; //Rewrite your path        }
        
    }

This is the article about the reasons and solutions for accessing white screens in Nginx configuration. For more information about accessing white screens in Nginx configuration, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!