How to solve Nginx 404 error

Recently, some problems have occurred when deploying projects, as shown in the figure

The normal login interface is accessible, but after logging in, the address after accessing will be reported 404 error, so I checked to see if there were any configuration errors, but after checking, I found that the IP and port of the two configuration files nginx.conf and config.js were correct

This project has been deployed many times and no such error has occurred.

This is the original untouched decompressed source file of nginx.conf

The circled place should be According to the project configuration corresponding ip and the listening port

listen corresponds to the port, and server_name corresponds to Accessedip

#But this does not solve the problem, we need to add the following sentence

try_files $uri $uri/ /index.html;

The added location should be here

Add it in the location section under server, and then restart nginx

In the directory where nginx.exe is located, click on the address bar and enter cmd. You can start the command line directly in the directory without opening cmd and then jumping. Table of contents.

If the nginx service has not been closed before, stop it first and then open it. If it has been closed, you can directly enter the command to start the service

Stop nginx service command:

nginx -s stop

Start nginx service command:

start nginx

Hot deployment nignx service command:

(But It is not recommended to use this command. Sometimes this command does not work. It is better to stop and start it directly)

nginx -s reload

After restarting nginx, it is best to clear the cache of the browserTest again

You can directly press

Ctrl Shift Del

in the browser window to directly open the cache clearing dialog box

Retest, you can access normally

Supplement: After Nginx deployment, there is no problem with normal clicks. Refreshing the page will cause a 404 problem.

After the project is deployed to the server, there is no problem with root path access (http:10.10.10.10), but 404 will appear when entering other functions and refreshing the page, such as

http:10.10.10.10/test /test/test Refresh the page and a 404 will appear because you did not add a redirection jump in the nginx configuration.

Solution, just add this configuration:

try_files $uri $uri/ /index.html;

server {
    listen 80;
    server_name 127.0.0.1;
	
	location / {
		root /data/htdocs/FactoryModel/micro-front-end/industrial-internet-platform-main-vue;
		index index.php index.html index.htm;
		# add_header Cache-Control;
		add_header Access-Control-Allow-Origin *;
		if ( $request_uri ~* ^.+.(js|css|jpg|png|gif|tif|dpg|jpeg|eot|svg|ttf|woff|json|mp4|rmvb|rm|wmv|avi|3gp)$ ){
		  add_header Cache-Control max-age=7776000;
		  add_header Access-Control-Allow-Origin *;
		}
		try_files $uri $uri/ /index.html;
	}
}

This configuration means every match When the corresponding static resource cannot be found in the url path, modulate and jump to the index.html file

You can add it here as shown

The following content requires a little understanding of the working principle of router routing and the principle of nginx

Analysis of why this happens (for routing in history mode):

Ask the question first:

1. Why does it happen when refreshing the page (without configuration and not Home page root directory refresh)
2. Why does it happen (sometimes) when clicking to jump

Now let’s solve the problem:

1. Assume that the url on the browser is now 172.1.2.3:7000/test. When refreshing the page, it will request the corresponding static resource from the server (nginx) according to the URL on the browser. nginx did not find the corresponding static resource in the dist folder according to the matching rule of location / File "test", so 404 is returned, which is reasonable.

At this time, configure try_files to redirect back to the index.html file, that is, go back to the homepage "/". Note that your page has been refreshed at this time, and react-router or vue-router is routing. When it works, the component will be matched according to the current URL address, so at this time the URL is the corresponding component, the page is reloaded, and it's done.

2. The second question is, why click to jump sometimes but not sometimes? You must know that there are two situations of jump: one is page refresh (belonging to the first question), and one is page does not jump. refresh. This depends on how your code is written. Please remember:

1. Push will not refresh the page, but will only change the url routing change on the browser, whether it is react-router or vue-router. They are all implemented using the html api, called pushState()
2. Passing will refresh the page, which is equivalent to a tag

You can try it on the browser by yourself

So when you click to jump, sometimes your code uses push (not refresh), and sometimes you use a tag or Link (refresh), which causes this problem.

The above is the detailed content of How to solve Nginx 404 error. For more information, please follow other related articles on the PHP Chinese website!