2、Nginx实现网页劫持-反向代理小demo

Hydrogen本尊
2,866 阅读3分钟

一、我的工具：

Tomcat 10.0.8 和 Nginx 1.20.1

二、开启 Tomcat 和 Nginx

1、开启 Nginx

cmd 进入 Nginx 安装目录，运行 start nginx 命令开启 Nginx，默认端口为 80。地址栏输入 http://localhost:80/ 能看见 Nginx 服务器已开启。因为 80 是默认端口，地址不写端口号会自动跳到 80 端口，写了会自动隐藏。

image.png

2、开启 Tomcat

双击运行 Tomcat 安装目录下 bin 文件夹里面的 Tomcat10w.exe，默认端口为 8080。地址栏输入 http://localhost:8080/ 能看见 Tomcat 服务器已开启。

image.png

找到 C:\windows\System32\drivers\etc 路径下的 hosts 文件，在最后一行添加：

127.0.0.1  www.baidu.com

现在:

  • 地址栏输入 www.baidu.com:80 打开的就是本地 Nginx 服务器启动页面。
  • 地址栏输入 www.baidu.com:8080 打开的就是本地 Tomcat 服务器启动网址。
  • 因为80端口默认不显示，所以直接输入 www.baidu.com 打开的就是本地 Nginx 服务器启动页面。

三、将 www.baidu.com 劫持到自己的写的网页上

1、实现自己本地的Tomcat小网页

在 Tomcat 安装目录的 webapps 文件夹下新建文件夹，放入一个工程或者HTML文件。 我这里的路径为 D:\2.Software\Tomcat\webapps\yeqi-web\vue.html 现在在地址栏输入 http://www.baidu.com:8080/yeqi-web/vue.html 就能打开自己的HTML文件

2、修改 Nginx 配置文件

对 Nginx 安装目录下 conf 文件夹里面的 nginx.conf 文件进行修改：

image.png

意思就是将 域名为 www.baidu.com ，端口为 80 的网址劫持到 http://127.0.0.1:8080/yeqi-web/vue.html 因为地址默认端口就是80，且默认不显示，所以在地址栏输入 http://www.baidu.com ，打开的就是我们自己的页面。

image.png

这样就实现了将百度网页拦截的功能。

切记：

如果想用 http://www.baidu.com 地址打开，那么 Nginx 的端口就必须是 80。 如果把端口改成 8800 或者其他乱七八糟的，就必须在后面老老实实加上端口号，因为只有 80 端口才可以省略不写。

总结

出现的一些问题：

问题1：找不到本地图片

因为我的网页里面嵌入了一张图片，所以最后一步在输入http://www.baidu.com 后，发现 vue 的 logo 出不来，控制台输出：

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

源码中引用该图片的代码为：

<img src="./assets/logo.png">

原因是：

Nginx 未对图片访问的路径进行配置。 图片的本地绝对路径为：D:\2.Software\Tomcat\webapps\yeqi-web\assets\logo.png 但Nginx 服务器找的路径却不是这个。

解决：

修改 conf 文件夹里面的 nginx.conf 中的 root ：

image.png

这个 location 说明如果你要访问 js,css,png... 结尾的文件，会在你的访问路径前加上root 。

访问 http://www.baidu.com/assets/logo.png 会将 http://www.baidu.com 替换成 D:/2.Software/Tomcat/webapps/yeqi-web。 即访问的路径为：D:\2.Software\Tomcat\webapps\yeqi-web\assets\logo.png 所以访问成功。

问题2：图片的路径为网上链接

在解决上面问题之前，还尝试过将图片路径改成网络地址去引用：

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

但是还是出现了如下问题：

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

报出了 403 禁止访问的错误。也就是说网页向目标资源发起了请求，但是服务器禁止你访问。

原因是：

Nginx 权限不够，没有指定可以运行 Nginx 服务的用户和用户组，只能在全局块配置。

解决：

  1. Linux 用户可以将 nginx.conf 第一行被注释掉的 #user nobody; 修改成 user root; 保存，再次重启 nginx 服务，就可以访问成功。Windows 用户这样修改则会报错，因为 user 指令在 Windows 上不生效，会有如下警告：

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

参考一下 Nginx配置文件详解

  1. 或者在 HTML 代码的 head 中添加一句
<meta charset="utf-8" name="referrer" content="no-referrer" >

具体解释可以看： imag标签访问图片，返回403失败

avatar
文章
阅读
粉丝