search
HomeOperation and MaintenanceNginxHow to solve Nginx 404 error

How to solve Nginx 404 error

May 17, 2023 pm 06:23 PM
nginx

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

How to solve Nginx 404 error

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

How to solve Nginx 404 error

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

How to solve Nginx 404 error

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

How to solve Nginx 404 error

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

How to solve Nginx 404 error

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!

Statement
This article is reproduced at:亿速云. If there is any infringement, please contact admin@php.cn delete
Using NGINX Unit: Deploying and Managing ApplicationsUsing NGINX Unit: Deploying and Managing ApplicationsApr 22, 2025 am 12:06 AM

NGINXUnit can be used to deploy and manage applications in multiple languages. 1) Install NGINXUnit. 2) Configure it to run different types of applications such as Python and PHP. 3) Use its dynamic configuration function for application management. Through these steps, you can efficiently deploy and manage applications and improve project efficiency.

NGINX vs. Apache: A Comparative Analysis of Web ServersNGINX vs. Apache: A Comparative Analysis of Web ServersApr 21, 2025 am 12:08 AM

NGINX is more suitable for handling high concurrent connections, while Apache is more suitable for scenarios where complex configurations and module extensions are required. 1.NGINX is known for its high performance and low resource consumption, and is suitable for high concurrency. 2.Apache is known for its stability and rich module extensions, which are suitable for complex configuration needs.

NGINX Unit's Advantages: Flexibility and PerformanceNGINX Unit's Advantages: Flexibility and PerformanceApr 20, 2025 am 12:07 AM

NGINXUnit improves application flexibility and performance with its dynamic configuration and high-performance architecture. 1. Dynamic configuration allows the application configuration to be adjusted without restarting the server. 2. High performance is reflected in event-driven and non-blocking architectures and multi-process models, and can efficiently handle concurrent connections and utilize multi-core CPUs.

NGINX vs. Apache: Performance, Scalability, and EfficiencyNGINX vs. Apache: Performance, Scalability, and EfficiencyApr 19, 2025 am 12:05 AM

NGINX and Apache are both powerful web servers, each with unique advantages and disadvantages in terms of performance, scalability and efficiency. 1) NGINX performs well when handling static content and reverse proxying, suitable for high concurrency scenarios. 2) Apache performs better when processing dynamic content and is suitable for projects that require rich module support. The selection of a server should be decided based on project requirements and scenarios.

The Ultimate Showdown: NGINX vs. ApacheThe Ultimate Showdown: NGINX vs. ApacheApr 18, 2025 am 12:02 AM

NGINX is suitable for handling high concurrent requests, while Apache is suitable for scenarios where complex configurations and functional extensions are required. 1.NGINX adopts an event-driven, non-blocking architecture, and is suitable for high concurrency environments. 2. Apache adopts process or thread model to provide a rich module ecosystem that is suitable for complex configuration needs.

NGINX in Action: Examples and Real-World ApplicationsNGINX in Action: Examples and Real-World ApplicationsApr 17, 2025 am 12:18 AM

NGINX can be used to improve website performance, security, and scalability. 1) As a reverse proxy and load balancer, NGINX can optimize back-end services and share traffic. 2) Through event-driven and asynchronous architecture, NGINX efficiently handles high concurrent connections. 3) Configuration files allow flexible definition of rules, such as static file service and load balancing. 4) Optimization suggestions include enabling Gzip compression, using cache and tuning the worker process.

NGINX Unit: Supporting Different Programming LanguagesNGINX Unit: Supporting Different Programming LanguagesApr 16, 2025 am 12:15 AM

NGINXUnit supports multiple programming languages ​​and is implemented through modular design. 1. Loading language module: Load the corresponding module according to the configuration file. 2. Application startup: Execute application code when the calling language runs. 3. Request processing: forward the request to the application instance. 4. Response return: Return the processed response to the client.

Choosing Between NGINX and Apache: The Right Fit for Your NeedsChoosing Between NGINX and Apache: The Right Fit for Your NeedsApr 15, 2025 am 12:04 AM

NGINX and Apache have their own advantages and disadvantages and are suitable for different scenarios. 1.NGINX is suitable for high concurrency and low resource consumption scenarios. 2. Apache is suitable for scenarios where complex configurations and rich modules are required. By comparing their core features, performance differences, and best practices, you can help you choose the server software that best suits your needs.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools