I. My tools:

Tomcat 10.0.8 and Nginx 1.20.1

Enable Tomcat and Nginx

1, openNginx

CMD go to the Nginx installation directory and run the start Nginx command to start Nginx. The default port is 80. Enter http://localhost:80/ in the address bar to see that the Nginx server is enabled. Because 80 is the default port, if the address is not written, the port number will automatically jump to 80. If the address is written, the port number will be hidden automatically.

2, openTomcat

Double-click tomcat10w. exe in the bin folder of the Tomcat installation directory. The default port is 8080. Enter http://localhost:8080/ in the address box to see that the Tomcat server is enabled.

Go to the hosts file in C:\ Windows \System32\drivers\etc and add the following on the last line:

127.0.0.1  www.baidu.com
Copy the code

Now:

  • Address bar inputwww.baidu.com:80Open is localNginxServer startup page.
  • Address bar inputwww.baidu.com:8080Open is localTomcatServer startup url.
  • Port 80 is not displayed by default, so enter it directlywww.baidu.comOpen is localNginxServer startup page.

Three,www.baidu.comHijacked your own web page

1, to achieve their own local Tomcat small web page

Create a folder in the Webapps folder of the Tomcat installation directory and place it in a project or HTML file. My path here is D: \ 2. Software \ Tomcat \ webapps \ yeqi – web \ vue HTML now enter http://www.baidu.com:8080/yeqi-web/vue.html in the address bar You can open your OWN HTML file

2. Modify the Nginx configuration file

Change the nginx.conf file in the Nginx installation directory.

Which means that the domain name www.baidu.com, port 80 url hijacking to http://127.0.0.1:8080/yeqi-web/vue.html because the address of the default port is 80, and the default does not display, So type http://www.baidu.com in the address bar and it opens up our own page.

This will achieve the baidu web page interception function.

Be sure to keep in mind:

If you want to open it with http://www.baidu.com, the Nginx port must be 80. If you change the port to 8800 or something else, you have to add the port number honestly, because only port 80 can be omitted.

conclusion

Some of the problems:

Problem 1: Local image cannot be found

Because there is a picture embedded in my webpage, I found that the LOGO of Vue could not be displayed after I entered http://www.baidu.com in the last step, and the console output was:

 GET http://www.yeqi.com/assets/logo.png 404 (Not Found)
Copy the code

The source code for this image is:

<img src="./assets/logo.png">
Copy the code

The reason is that:

Nginx does not configure image access paths. The local absolute path of the image is: D:\2.Software\Tomcat\webapps\yeqi-web\assets\logo.png but the Nginx server is not looking for this path.

To solve:

Change root in nginx.conf folder:

This location indicates that if you want to access JS, CSS, PNG… At the end of the file, you will add root before your access path.

Visit http://www.baidu.com/assets/logo.png will replace D: http://www.baidu.com / 2. The Software/Tomcat/webapps/yeqi – web. Software\Tomcat\webapps\yeqi-web\assets\logo.png.

Problem 2: The path of the picture is the link on the Internet

Before solving the above problem, I also tried to change the image path to the network address to reference:

<img src="https://wx2.sinaimg.cn/mw690/006h2r3Sgy1gsvhbezpyjj305k05k3yo.jpg">
Copy the code

However, the following problems still arise:

GET https://wx2.sinaimg.cn/mw690/006h2r3Sgy1gsvhbezpyjj305k05k3yo.jpg 403
Copy the code

A 403 forbidden access error was reported. That is, the web page makes a request to the target resource, but the server forbids you from accessing it.

The reason is that:

Nginx permissions are not sufficient to specify users and user groups that can run Nginx services, and can only be configured in global blocks.

To solve:

  1. Linux users can comment #user nobody on the first line of nginx.conf; Change to user root; Save, restart the nginx service again, you can access successfully. Windows users will get an error because the user command does not work on Windows, and the following warning will be displayed:

      #nginx: [warn] "user" is not supported, ignored in D:\2.Software\nginx-1.20.1/conf/nginx.conf:2
Copy the code

Refer to the Nginx configuration file for details

  1. Or add a sentence to the HEAD of your HTML code
<meta charset="utf-8" name="referrer" content="no-referrer" >
Copy the code

The iMAG label fails to access the image