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!

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.

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 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.

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.

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.

Question: How to start Nginx? Answer: Install Nginx Startup Nginx Verification Nginx Is Nginx Started Explore other startup options Automatically start Nginx

How to confirm whether Nginx is started: 1. Use the command line: systemctl status nginx (Linux/Unix), netstat -ano | findstr 80 (Windows); 2. Check whether port 80 is open; 3. Check the Nginx startup message in the system log; 4. Use third-party tools, such as Nagios, Zabbix, and Icinga.

To shut down the Nginx service, follow these steps: Determine the installation type: Red Hat/CentOS (systemctl status nginx) or Debian/Ubuntu (service nginx status) Stop the service: Red Hat/CentOS (systemctl stop nginx) or Debian/Ubuntu (service nginx stop) Disable automatic startup (optional): Red Hat/CentOS (systemctl disabled nginx) or Debian/Ubuntu (syst


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

WebStorm Mac version
Useful JavaScript development tools

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.