NGINX反向代理

bestproxy • • 代理百科

（给Linux爱好者加星标，提升Linux技能）

来源：圈圈的圈

juejin.im/post/5c0e6d606fb9a049f66bf246

代理是个啥

既然要聊反向代理, 那首先得知道代理是个啥吧? 嗯.

正向代理

比如, 你买束花, 想要给隔壁工位的测试妹子小丽表白. 但是又怕被人家直面拒绝太没面子. 于是你把鲜花委托给平时和小丽一起的测试小伙伴小红. 让她帮忙把花送给小丽. 这就是一个简单的代理过程, 小红作为代理帮你把花送给了小丽, 当然这种情况在现实中并不推荐使用, 因为难以避免中间商赚差价 😂.

在上面的例子中, 你作为客户端(请求方), 想要向服务方(小丽)发起请求. 但是碍于面子你主动找到了第三方(小红)作为代理向服务方发送请求, 这种情况就是常说的正向代理. 正向代理在互联网中的使用主要是科学上网, 你想访问谷歌但是碍于防火墙你只能通过vpn服务器作为代理才能访问. 这个时候一般也要找值得信赖的vpn厂商, 避免中间商赚差价 😄.

反向代理

关于反向代理的例子, 那就比较多啦. 比如, 孤独的你躺在床上夜不能寐. 于是乎, 拿出手机, 点亮了屏幕, 拨通 10086, 中国移动就会随机分配一个当前处于空闲的客服MM, 你可以和客服MM聊聊天, 问问她家住哪里, 有没有男朋友, 她的号, 她的手机号, 星座, 八字.......

在这个例子中, 中国移动就充当了反向代理的角色. 你只需要拨打 10086. 至于会不会分配到 MM 会分配到哪个 MM 在接通之前你都是不知道的. 反向代理在互联网中的使用主要是实现负载均衡. 当你访问某个网站的时候, 反向代理服务器会从当前网站的所有服务器中选择一个空闲的服务器为你响应. 用于均衡每台服务器的负载率.

修改 hosts 完成域名绑定

mac 用户直接执行 vim /private/etc/hosts 在 hosts 文件最后添加一行:

127.0.0.1 a.com

这一句是什么意思呢? 就是告诉我们的电脑访问 a.com 的时候, 无需请求 DNS, 直接指向我们本机.

ps: win 环境下, hosts 文件在 C:WindowsSystem32driversetc 文件夹下. 如果没有权限修改, 把 hosts 文件先拷贝到别的位置, 通过编辑器打开并添加最后一行内容以后再剪切到原来的位置替换即可.

验证: 打开命令行窗口执行 ping a.com, 如果访问的 ip 为 127.0.0.1 说明我们的域名绑定就完成啦 ^_^

安装 nginx

要做 NGINX 反向代理, 肯定要安装 nginx, 本文安装步骤示例环境为 mac, win 的小伙伴, 可以百度一下嗷, 这个东西大同小异.

安装 brew 命令, 执行 ruby -e "$(curl -fsSL "

安装 nginx, 执行 brew install nginx

启动 nginx nginx, 如果报没有权限, 执行 sudo nginx

nginx 启动后, 浏览器打开 localhost:8080, 即可验证. 出现以下界面说明安装成功.

nginx 配置初探

配置完 hosts 域名已经能够成功绑定. 现在如果我们访问 a.com 实际上是会访问到我们的自己的电脑辣. 那还不抓紧试一下?

浏览器访问 a.com

这是什么鬼????

为什么会 无法访问此网站 呢? 我们下载安装完 nginx 还没有做任何配置. 接下来, 我们稍微配置一下就 OK:

命令行切换到 nginx 配置目录下 cd /usr/local/etc/nginx/servers

创建并编辑配置文件 vim test.conf, 在配置文件中粘贴以下内容

server {

      # 监听80端口号

      listen 80;

      # 监听访问的域名

      server_name a.com;

      # 根据访问路径配置

      location / {

          # 把请求转发到 https://www.baidu.com

          proxy_pass https://www.baidu.com;

      }

  }

保存文件, 并执行 nginx -s reload 重启 nginx.

回到浏览器, 打开 a.com 的页签, 强制刷新.

恭喜你已经完成了第一个 nginx 配置.

创建跨域环境

通过一系列的折腾, 我们已经可以通过 nginx 将a.com 转发到百度. 完成了第一步, 接下来我们创建跨域的 Case 并一步一步通过 nginx 配置实现跨域.

首先, 项目前后端添加 nginx 目录, 用户存放前后端代码. 代码结构如下图所示.

其次编写前后端代码:

前端代码(./fe/nginx/index.html):

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>CORS 实现跨域</title>

</head>

<body>

    <h3>CORS 实现跨域</h3>

    <script>

        var xhr = new XMLHttpRequest()

        xhr.open(GET, :8888/api/getFriend)

        xhr.setRequestHeader(token, quanquanbunengshuo)

        xhr.withCredentials = true;

        xhr.onreadystatechange = function() {

            if(xhr.readyState === 4 && xhr.status === 200) {

                console.log(xhr.responseText)

                console.log(xhr.getAllResponseHeaders())

            }

        }

        xhr.send()

    </script>

</body>

</html>

编写完前端代码以后, 启动前端 web 容器. live-server ./fe/nginx

命令行中出现了黄色警告, 通知我们 8080 端口已经被占用, 这又是为什么呢? 大家请思考一哈.

我们重新指定一个端口live-server ./fe/nginx --port=9999 哈哈, 换一个指令, 依旧是那么顺畅. ^_^

后端代码：

const http = require(http);

const PORT = 8888;

// 创建一个 http 服务

const server = http.createServer((request, response) => {

  console.log(request.headers)

  response.end("{name: quanquan, friend: guiling}");

});

// 启动服务, 监听端口

server.listen(PORT, () => {

  console.log(服务启动成功, 正在监听: , PORT);

});

启动后端服务 node ./be/nginx/index.js

完善 nginx 配置

前后端代码已经准备完成, 这一步我们就来点干货. 完成最后的配置.

首先, 修改 nginx 配置, 把百度地址替换成本地的前端地址

server {

      # 监听80端口号

      listen 80;

      # 监听访问的域名

      server_name a.com;

      # 根据访问路径配置

      location / {

          # 把请求转发到 http://127.0.0.1:9999

          proxy_pass http://127.0.0.1:9999;

      }

  }

修改完成 nginx 配置文件以后, 切记执行 nginx -s -reload 重启 nginx.

访问a.com

熟悉的报错又出现了...

修改前端项目中的接口地址

// 接口地址修改为当前域名下 /api 路劲下的 getFriend

    xhr.open(GET, /api/getFriend)

修改 nginx 配置文件

server {

        # 监听80端口号

        listen 80;

        # 监听访问的域名

        server_name a.com;

        # 根据访问路径配置

        location / {

            # 把请求转发到 http://127.0.0.1:9999

            proxy_pass http://127.0.0.1:9999;

        }

        # 监听根目录下的 /api 路径

        location /api/ {

            # 把请求转发到 http://127.0.0.1:8888

            proxy_pass http://127.0.0.1:8888;

        }

    }

新加的对于 api 路径的监听的意思就是把关于后端 api 的请求转发到后端项目上(哈哈, 当然这就是为啥好多后端接口都是要有 /api 开头的啦). 重启 nginx 以后, 再次刷新浏览器, 后端返回的结果已经成功的打印到了控制台, 本次跨域访问任务完成.

细心的小伙伴肯定发现了, 控制台还有一个报错. 这个是因为我们的项目中用到了 live-server 这个工具需要 websocket 导致的. 我们可以通过添加以下配置解决.

proxy_http_version 1.1;

proxy_set_header Upgrade $http_upgrade;

proxy_set_header Connection "upgrade";

报错消失 😄, 此时完整的 nginx 配置文件为

server {

    # 监听80端口号

    listen 80;

    # 监听访问的域名

    server_name a.com;

    # 根据访问路径配置

    location / {

        # 把请求转发到 http://127.0.0.1:9999

        proxy_pass http://127.0.0.1:9999;

        # 兼容websocket

        proxy_http_version 1.1;

        proxy_set_header Upgrade $http_upgrade;

        proxy_set_header Connection "upgrade";

    }

    # 监听根目录下的 /api 路径

    location /api/ {

        # 把请求转发到 http://127.0.0.1:8888

        proxy_pass http://localhost:8888;

    }

}

前后端代码地址为：

总结

至此, 我们已经通过 nginx 反向代理的方式实现了跨域访问 api, 在系列文章第一篇()对于跨域的解释为: 跨域源于同源策略, 是浏览器保证用户安全的行为. 我们使用的 nginx 反向代理实际上是对浏览器的一种 "哄骗", 让它认为自己访问到的是同域的 api. 实际上是在服务端做了个调包, 这个道理就如同你拨打 10086 你就认定了给你分配到的一定是中国移动的客服MM(客服GG也是有可能出现的 😄)而中国移动的客服MM就是一个很安全的聊天对象, 没有必要再进行限制..

推荐阅读

（点击标题可跳转阅读）

全面了解 Nginx 到底能做什么

Nginx 教程（1）：基本概念

Nginx 教程（2）：性能

看完本文有收获？请分享给更多人

关注「Linux 爱好者」加星标，提升Linux技能

喜欢就点一下「好看」呗~

赞 (0)
« 上一篇 2022年3月27日 am11:50
下一篇 » 2022年3月27日 am11:52

相关文章

  • 腌好的荠菜疙瘩教你这么吃，酱香浓郁，开胃又下饭，做法超简单

    　　腌好的荠菜疙瘩教你这么吃，酱香浓郁，开胃又下饭，做法超简单。一提起芥菜疙瘩，相信大家都不会陌生，小时候村子里家家户户都会种上一些，然后冬天的时候腌上满满的一缸，成为未来一年最重要的菜肴。去年的冬天刚好也腌了一些芥菜疙瘩咸菜，芥菜疙瘩最突出的也就是它的清甜爽脆的口感，新鲜的芥菜疙瘩用清水洗干净后，再擦成丝或者切成片，炒着吃就格外的香，但是芥菜疙瘩这种东西产...

    代理百科 2022年6月8日

  • 清除Chrome自动添加HTTPS

    有时候访问“HTTP”协议的网址，Chrome 强制转换成“HTTPS”协议，访问目标网址，可能不是我们所期望的样子，需要需要针对 Chrome 进行一下设置； 访问地址： chrome://net-internals/#hsts

    代理百科 2022年7月19日

  • nginx作为web服务器和反向代理的区别

    展开全部 web服务器直接将请求进行处理，如要获取一个静态的html文件，它直接从磁盘指定目录找到这个文件并返回做反向代理时，它会根据配置的信息，将请求转发到另一个服务上进行处理，然后等待服务返回结果，再将结果转给客户端，本身并不处理请求，而是在中间做一个转发请求和响应的角色

    代理百科 2022年3月16日

  • 曼联股价首次跌破11美元创新低，去年C罗加盟时曾涨至20.74美元

    　　直播吧6月16日讯 据多家英媒报道，在本周一股市收盘后，曼联股价跌至11.07美元，这是俱乐部自2012年8月首次公开募股后的最低值。 　　根据纽约证券交易所的数据，曼联市值因此下跌了13.2亿英镑。 　　而在14日开盘后，曼联股价跌破11美元，此前最低值为12.25美元。 　　曼联股价近1年涨跌 　　作为对比，一年前，曼联公司股价为15.66美元。去年...

    代理百科 2022年6月20日

  • 代理IP后，网速很慢很慢为什么

    展开全部 用了代理IP后网还是慢，可能是以下几个原因：1. 代理IP网络服务器所在网络速度不佳： 因为大部分的用户碰到使用代理IP网站访问慢的时候，第一个大概想到的就是找服务提供商处理，排查是否是因为代理IP网络服务器出问题引起的访问速度变慢。2. 代理IP网络服务器安全性能差： 假如代理IP长时间使用速度特别迟缓，就有可能是网络服务器使用性能差了，运载不了...

    代理百科 2022年4月22日

  • 组策略编辑器怎么打开

    首先，我们只需要提出组策略。单击“开始”菜单，选择“运行”，然后输入“ gpedit.msc”，单击确定以打开组策略， gpedit.msc组策略命令 进入组策略编辑器界面 其他打开组策略的方法 由于安全原因，某些网吧通常不允许用户打开启动项。对于一般用户，此功能很少使用。因此，禁用的启动对话框对用户在Internet上的浏览没有影响，因此，在这种情况下如何...

    代理百科 2022年4月21日