1. 首页
  2. IT资讯

一文读懂并实操 Nginx 反向代理

“u003Cpu003EJava后端,选择 u003Cu002Fpu003Eu003Cpu003E优质文章,及时送达u003Cu002Fpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002FRcsUnd92eoboDR” img_width=”640″ img_height=”29″ alt=”一文读懂并实操 Nginx 反向代理” inline=”0″u003Eu003Cpu003E作者 | 圈圈的圈u003Cu002Fpu003Eu003Cpu003E链接 | juejin.imu002Fpostu002F5c0e6d606fb9a049f66bf246u003Cu002Fpu003Eu003Cpu003Eu003Cstrong toutiao-origin=”span” class=”highlight-text”u003E前言u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E代理是个啥u003Cu002Fpu003Eu003Cpu003E既然要聊反向代理, 那首先得知道代理是个啥吧? 嗯.u003Cu002Fpu003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch2 toutiao-origin=”h3″u003Eu003Cstrong toutiao-origin=”span” class=”highlight-text”u003E正向代理u003Cu002Fstrongu003Eu003Cu002Fh2u003Eu003Cpu003E比如, 你买束花, 想要给隔壁工位的测试妹子小丽表白. 但是又怕被人家直面拒绝太没面子. 于是你把鲜花委托给平时和小丽一起的测试小伙伴小红. 让她帮忙把花送给小丽. 这就是一个简单的代理过程, 小红作为代理帮你把花送给了小丽, 当然这种情况在现实中并不推荐使用, 因为难以避免中间商赚差价 .u003Cu002Fpu003Eu003Cpu003E在上面的例子中, 你作为客户端(请求方), 想要向服务方(小丽)发起请求. 但是碍于面子你主动找到了第三方(小红)作为代理向服务方发送请求, 这种情况就是常说的u003Ccodeu003E正向代理u003Cu002Fcodeu003E. 正向代理在互联网中的使用主要是科学上网, 你想访问谷歌但是碍于防火墙你只能通过vpn服务器作为代理才能访问. 这个时候一般也要找值得信赖的vpn厂商, 避免中间商赚差价 .u003Cu002Fpu003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002FRiJ0HbCFR4lmbn” img_width=”640″ img_height=”390″ alt=”一文读懂并实操 Nginx 反向代理” inline=”0″u003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch2 toutiao-origin=”h3″u003Eu003Cstrong toutiao-origin=”span” class=”highlight-text”u003E反向代理u003Cu002Fstrongu003Eu003Cu002Fh2u003Eu003Cpu003E关于反向代理的例子, 那就比较多啦. 比如, 孤独的你躺在床上夜不能寐. 于是乎, 拿出手机, 点亮了屏幕, 拨通 u003Ccodeu003E10086u003Cu002Fcodeu003E, 中国移动就会随机分配一个当前处于空闲的客服MM, 你可以和客服MM聊聊天, 问问她家住哪里, 有没有男朋友, 她的u003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-2″u003E微信u003Cu002Fiu003E号, 她的手机号, 星座, 八字…….u003Cu002Fpu003Eu003Cpu003E在这个例子中, 中国移动就充当了反向代理的角色. 你只需要拨打 u003Ccodeu003E10086u003Cu002Fcodeu003E. 至于会不会分配到 MM 会分配到哪个 MM 在接通之前你都是不知道的. 反向代理在互联网中的使用主要是实现负载均衡. 当你访问某个网站的时候, 反向代理服务器会从当前网站的所有服务器中选择一个空闲的服务器为你响应. 用于均衡每台服务器的负载率.u003Cu002Fpu003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002FRiJ0HbODlf4Hge” img_width=”640″ img_height=”366″ alt=”一文读懂并实操 Nginx 反向代理” inline=”0″u003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch1 toutiao-origin=”h2″u003E修改 hosts 完成域名绑定u003Cu002Fh1u003Eu003Cpu003Emac 用户直接执行 u003Ccodeu003Evim u002Fprivateu002Fetcu002Fhostsu003Cu002Fcodeu003E在 hosts 文件最后添加一行:u003Cu002Fpu003Eu003Cpreu003Eu003Ccodeu003E127.0.0.1 au003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-1″u003E.comu003Cu002Fiu003Eu003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cpu003E这一句是什么意思呢? 就是告诉我们的电脑访问 u003Ccodeu003Eau003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-1″u003E.comu003Cu002Fiu003Eu003Cu002Fcodeu003E的时候, 无需请求 DNS, 直接指向我们本机.u003Cu002Fpu003Eu003Cpu003Eps: win 环境下, hosts 文件在 u003Ccodeu003EC:\Windows\System32\drivers\etcu003Cu002Fcodeu003E文件夹下. 如果没有权限修改, 把 hosts 文件先拷贝到别的位置, 通过编辑器打开并添加最后一行内容以后再剪切到原来的位置替换即可.u003Cu002Fpu003Eu003Cpu003E验证: 打开命令行窗口执行 u003Ccodeu003Eping au003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-1″u003E.comu003Cu002Fiu003Eu003Cu002Fcodeu003E, 如果访问的 ip 为 127.0.0.1 说明我们的域名绑定就完成啦 ^_^u003Cu002Fpu003Eu003Cpu003ETips:可以u003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-2″u003E微信u003Cu002Fiu003E搜索:Java后端,u003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-2″u003E关注u003Cu002Fiu003E后加入咱们自己的交流群。u003Cu002Fpu003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch1 toutiao-origin=”h2″u003E安装 nginxu003Cu002Fh1u003Eu003Cblockquoteu003Eu003Cpu003E要做 NGINX 反向代理, 肯定要安装 nginx, 本文安装步骤示例环境为 mac, win 的小伙伴, 可以百度一下嗷, 这个东西大同小异.u003Cu002Fpu003Eu003Cu002Fblockquoteu003Eu003Culu003Eu003Cliu003Eu003Cpu003E安装 brew 命令, 执行u003Ccodeu003Eruby -e “$(curl -fsSL https:u002Fu002Fraw.githubusercontentu003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-1″u003E.comu003Cu002Fiu003Eu002FHomebrewu002Finstallu002Fmasteru002Finstall)”u003Cu002Fcodeu003Eu003Cu002Fpu003Eu003Cu002Fliu003Eu003Cliu003Eu003Cpu003E安装 nginx, 执行 u003Ccodeu003Ebrew install nginxu003Cu002Fcodeu003Eu003Cu002Fpu003Eu003Cu002Fliu003Eu003Cliu003Eu003Cpu003E启动 nginx u003Ccodeu003Enginxu003Cu002Fcodeu003E, 如果报没有权限, 执行u003Ccodeu003Esudo nginxu003Cu002Fcodeu003Eu003Cu002Fpu003Eu003Cu002Fliu003Eu003Cu002Fulu003Eu003Cpu003Enginx 启动后, 浏览器打开 localhost:8080, 即可验证. 出现以下界面说明安装成功.u003Cu002Fpu003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002FRiJ0HbVCjLJw4t” img_width=”640″ img_height=”131″ alt=”一文读懂并实操 Nginx 反向代理” inline=”0″u003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch1 toutiao-origin=”h2″u003Enginx 配置初探u003Cu002Fh1u003Eu003Cpu003E配置完 hosts 域名已经能够成功绑定. 现在如果我们访问 u003Ccodeu003Eau003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-1″u003E.comu003Cu002Fiu003Eu003Cu002Fcodeu003E实际上是会访问到我们的自己的电脑辣. 那还不抓紧试一下?u003Cu002Fpu003Eu003Cpu003E浏览器访问 au003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-1″u003E.comu003Cu002Fiu003Eu003Cu002Fpu003Eu003Cpu003E这是什么鬼????u003Cu002Fpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002FRiJ0Hbb2jZxyaY” img_width=”640″ img_height=”354″ alt=”一文读懂并实操 Nginx 反向代理” inline=”0″u003Eu003Cpu003E为什么会 u003Cstrongu003E无法访问此网站u003Cu002Fstrongu003E呢? 我们下载安装完 nginx 还没有做任何配置. 接下来, 我们稍微配置一下就 OK:u003Cu002Fpu003Eu003Culu003Eu003Cliu003Eu003Cpu003E命令行切换到 nginx 配置目录下u003Ccodeu003Ecd u002Fusru002Flocalu002Fetcu002Fnginxu002Fserversu003Cu002Fcodeu003Eu003Cu002Fpu003Eu003Cu002Fliu003Eu003Cliu003Eu003Cpu003E创建并编辑配置文件u003Ccodeu003Evim test.confu003Cu002Fcodeu003E, 在配置文件中粘贴以下内容u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cu002Fulu003Eu003Cpreu003Eu003Cbru003Eu003Cdivu003Eu003Cpreu003Eu003Ccodeu003Eserver {u003Cbru003E# 监听80端口号u003Cbru003Elisten 80;u003Cbru003Eu003Cbru003E# 监听访问的域名u003Cbru003Eserver_name au003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-1″u003E.comu003Cu002Fiu003E;u003Cbru003Eu003Cbru003E# 根据访问路径配置u003Cbru003Elocation u002F {u003Cbru003E# 把请求转发到 https:u002Fu002Fu003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-3″u003Ewwwu003Cu002Fiu003E.baiduu003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-1″u003E.comu003Cu002Fiu003Eu003Cbru003Eproxy_pass https:u002Fu002Fu003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-3″u003Ewwwu003Cu002Fiu003E.baiduu003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-1″u003E.comu003Cu002Fiu003E;u003Cbru003E}u003Cbru003E}u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cu002Fdivu003Eu003Cbru003Eu003Cu002Fpreu003Eu003Culu003Eu003Cliu003Eu003Cpu003E保存文件, 并执行u003Ccodeu003Enginx -s reloadu003Cu002Fcodeu003E重启 nginx.u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cu002Fulu003Eu003Culu003Eu003Cliu003Eu003Cpu003E回到浏览器, 打开 au003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-1″u003E.comu003Cu002Fiu003E 的页签, 强制刷新.u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cu002Fulu003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002FRiJ0HbhC5uU0ak” img_width=”640″ img_height=”316″ alt=”一文读懂并实操 Nginx 反向代理” inline=”0″u003Eu003Cpu003E恭喜你已经完成了第一个 nginx 配置.u003Cu002Fpu003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch1 toutiao-origin=”h2″u003E创建跨域环境u003Cu002Fh1u003Eu003Cblockquoteu003Eu003Cpu003E通过一系列的折腾, 我们已经可以通过 nginx 将u003Ccodeu003Eau003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-1″u003E.comu003Cu002Fiu003Eu003Cu002Fcodeu003E转发到百度. 完成了第一步, 接下来我们创建跨域的 Case 并一步一步通过 nginx 配置实现跨域.u003Cu002Fpu003Eu003Cu002Fblockquoteu003Eu003Cpu003E首先, 项目前后端添加 nginx 目录, 用户存放前后端代码. 代码结构如下图所示.u003Cu002Fpu003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002FRiJ0HznCzd7NeP” img_width=”524″ img_height=”674″ alt=”一文读懂并实操 Nginx 反向代理” inline=”0″u003Eu003Cpu003E其次编写前后端代码:u003Cu002Fpu003Eu003Cpu003E前端代码(u003Ccodeu003E.u002Ffeu002Fnginxu002Findex.htmlu003Cu002Fcodeu003E):u003Cu002Fpu003Eu003Cpreu003Eu003Ccodeu003E<!DOCTYPE html>u003Cbru003E<html lang=”en”>u003Cbru003E<head>u003Cbru003E<meta charset=”UTF-8″>u003Cbru003E<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>u003Cbru003E<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>u003Cbru003E<title>CORS 实现跨域<u002Ftitle>u003Cbru003E<u002Fhead>u003Cbru003E<body>u003Cbru003E<h3>CORS 实现跨域<u002Fh3>u003Cbru003Eu003Cbru003E<script>u003Cbru003Evar xhr = new XMLHttpRequestu003Cbru003Exhr.open(‘GET’, ‘http:u002Fu002Flocalhost:8888u002Fapiu002FgetFriend’)u003Cbru003Exhr.setRequestHeader(‘token’, ‘quanquanbunengshuo’)u003Cbru003Exhr.withCredentials = true;u003Cbru003Exhr.onreadystatechange = function {u003Cbru003Eif(xhr.readyState === 4 && xhr.status === 200) {u003Cbru003Econsole.log(xhr.responseText)u003Cbru003Econsole.log(xhr.getAllResponseHeaders)u003Cbru003E}u003Cbru003E}u003Cbru003Exhr.sendu003Cbru003E<u002Fscript>u003Cbru003E<u002Fbody>u003Cbru003E<u002Fhtml>u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cpu003E编写完前端代码以后, 启动前端 web 容器. u003Ccodeu003Elive-server .u002Ffeu002Fnginxu003Cu002Fcodeu003Eu003Cu002Fpu003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002FRiJ0I00GKfATcw” img_width=”640″ img_height=”76″ alt=”一文读懂并实操 Nginx 反向代理” inline=”0″u003Eu003Cpu003E命令行中出现了黄色警告, 通知我们 8080 端口已经被占用, 这又是为什么呢? 大家请思考一哈.u003Cu002Fpu003Eu003Cpu003E我们重新指定一个端口u003Ccodeu003Elive-server .u002Ffeu002Fnginx –port=9999u003Cu002Fcodeu003E哈哈, 换一个指令, 依旧是那么顺畅. ^_^u003Cu002Fpu003Eu003Cpu003E后端代码:u003Cu002Fpu003Eu003Cpreu003Eu003Ccodeu003Econst http = require(‘http’);u003Cbru003Eu003Cbru003Econst PORT = 8888;u003Cbru003Eu003Cbru003Eu003Cbru003Econst server = http.createServer((request, response) => {u003Cbru003Econsole.log(request.headers)u003Cbru003Eresponse.end(“{name: ‘quanquan’, friend: ‘guiling’}”);u003Cbru003E});u003Cbru003Eu003Cbru003Eu003Cbru003Eserver.listen(PORT, => {u003Cbru003Econsole.log(‘服务启动成功, 正在监听: ‘, PORT);u003Cbru003E});u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cpu003E启动后端服务 u003Ccodeu003Enode .u002Fbeu002Fnginxu002Findex.jsu003Cu002Fcodeu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch1 toutiao-origin=”h2″u003E完善 nginx 配置u003Cu002Fh1u003Eu003Cblockquoteu003Eu003Cdivu003Eu003Cpu003E前后端代码已经准备完成, 这一步我们就来点干货. 完成最后的配置.u003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cu002Fblockquoteu003Eu003Culu003Eu003Cliu003Eu003Cpu003E首先, 修改 nginx 配置, 把百度地址替换成本地的前端地址u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cu002Fulu003Eu003Cpreu003Eu003Ccodeu003Eserver {u003Cbru003E# 监听80端口号u003Cbru003Elisten 80;u003Cbru003Eu003Cbru003E# 监听访问的域名u003Cbru003Eserver_name au003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-1″u003E.comu003Cu002Fiu003E;u003Cbru003Eu003Cbru003E# 根据访问路径配置u003Cbru003Elocation u002F {u003Cbru003E# 把请求转发到 http:u002Fu002F127.0.0.1:9999u003Cbru003Eproxy_pass http:u002Fu002F127.0.0.1:9999;u003Cbru003E}u003Cbru003E}u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Culu003Eu003Cliu003Eu003Cpu003E修改完成 nginx 配置文件以后, 切记执行 u003Ccodeu003Enginx -s -reload u003Cu002Fcodeu003E重启 nginx.u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cu002Fulu003Eu003Culu003Eu003Cliu003Eu003Cpu003E访问au003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-1″u003E.comu003Cu002Fiu003Eu003Cu002Fpu003Eu003Cu002Fliu003Eu003Cu002Fulu003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002FRiJ0I08ALlJ094″ img_width=”640″ img_height=”246″ alt=”一文读懂并实操 Nginx 反向代理” inline=”0″u003Eu003Cpu003E熟悉的报错又出现了…u003Cu002Fpu003Eu003Culu003Eu003Cliu003Eu003Cpu003E修改前端项目中的接口地址:xhr.open(‘GET’, ‘u002Fapiu002FgetFriend’)u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cliu003Eu003Cpu003E修改 nginx 配置文件u003Cu002Fpu003Eu003Cu002Fliu003Eu003Cu002Fulu003Eu003Cpreu003Eu003Cdivu003Eu003Cpreu003Eu003Ccodeu003Eserver {u003Cbru003E# 监听80端口号u003Cbru003Elisten 80;u003Cbru003Eu003Cbru003E# 监听访问的域名u003Cbru003Eserver_name au003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-1″u003E.comu003Cu002Fiu003E;u003Cbru003Eu003Cbru003E# 根据访问路径配置u003Cbru003Elocation u002F {u003Cbru003E# 把请求转发到 http:u002Fu002F127.0.0.1:9999u003Cbru003Eproxy_pass http:u002Fu002F127.0.0.1:9999;u003Cbru003E}u003Cbru003Eu003Cbru003E# 监听根目录下的 u002Fapi 路径u003Cbru003Elocation u002Fapiu002F {u003Cbru003E# 把请求转发到 http:u002Fu002F127.0.0.1:8888u003Cbru003Eproxy_pass http:u002Fu002F127.0.0.1:8888;u003Cbru003E}u003Cbru003E}u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cu002Fdivu003Eu003Cu002Fpreu003Eu003Cpu003E新加的对于 api 路径的监听的意思就是把关于后端 api 的请求转发到后端项目上(哈哈, 当然这就是为啥好多后端接口都是要有 u003Ccodeu003Eu002Fapiu003Cu002Fcodeu003E开头的啦). 重启 nginx 以后, 再次刷新浏览器, 后端返回的结果已经成功的打印到了控制台, 本次跨域访问任务完成.u003Cu002Fpu003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002FRiJ0I0FGF4JYRp” img_width=”640″ img_height=”309″ alt=”一文读懂并实操 Nginx 反向代理” inline=”0″u003Eu003Cpu003E细心的小伙伴肯定发现了, 控制台还有一个报错. 这个是因为我们的项目中用到了 u003Ccodeu003Elive-serveru003Cu002Fcodeu003E这个工具需要 websocket 导致的. 我们可以通过添加以下配置解决.u003Cu002Fpu003Eu003Cpreu003Eu003Ccodeu003Eproxy_http_version 1.1;u003Cbru003Eproxy_set_header Upgrade $http_upgrade;u003Cbru003Eproxy_set_header Connection “upgrade”;u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002FRiJ0I0M8cMpBPe” img_width=”640″ img_height=”269″ alt=”一文读懂并实操 Nginx 反向代理” inline=”0″u003Eu003Cpu003E报错消失 , 此时完整的 nginx 配置文件为u003Cu002Fpu003Eu003Cpreu003Eu003Ccodeu003Eserver {u003Cbru003E# 监听80端口号u003Cbru003Elisten 80;u003Cbru003Eu003Cbru003E# 监听访问的域名u003Cbru003Eserver_name au003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-1″u003E.comu003Cu002Fiu003E;u003Cbru003Eu003Cbru003E# 根据访问路径配置u003Cbru003Elocation u002F {u003Cbru003E# 把请求转发到 http:u002Fu002F127.0.0.1:9999u003Cbru003Eproxy_pass http:u002Fu002F127.0.0.1:9999;u003Cbru003Eu003Cbru003E# 兼容websocketu003Cbru003Eproxy_http_version 1.1;u003Cbru003Eproxy_set_header Upgrade $http_upgrade;u003Cbru003Eproxy_set_header Connection “upgrade”;u003Cbru003E}u003Cbru003Eu003Cbru003E# 监听根目录下的 u002Fapi 路径u003Cbru003Elocation u002Fapiu002F {u003Cbru003E# 把请求转发到 http:u002Fu002F127.0.0.1:8888u003Cbru003Eproxy_pass http:u002Fu002Flocalhost:8888;u003Cbru003E}u003Cbru003E}u003Cu002Fcodeu003Eu003Cu002Fpreu003Eu003Cpu003E前后端代码地址为: u003Cu002Fpu003Eu003Cpu003Ehttps:u002Fu002Fgithubu003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-1″u003E.comu003Cu002Fiu003Eu002Fluoquanquanu002Fcross-domainu002Fcommitu002Ff38f56689fdacu003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-6″u003E152u003Cu002Fiu003E6244ecadaa9u003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-6″u003E79u003Cu002Fiu003Ea52c9c4a7eau003Cu002Fpu003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch1 toutiao-origin=”h2″u003E总结u003Cu002Fh1u003Eu003Cpu003E至此, 我们已经通过 nginx 反向代理的方式实现了跨域访问 api, 在系列文章第一篇对于跨域的解释为: 跨域源于同源策略, 是浏览器保证用户安全的行为. 我们使用的 nginx 反向代理实际上是对浏览器的一种 “哄骗”, 让它认为自己访问到的是同域的 api. 实际上是在服务端做了个调包, 这个道理就如同你拨打 10086 你就认定了给你分配到的一定是中国移动的客服MM(客服GG也是有可能出现的 )而中国移动的客服MM就是一个很安全的聊天对象, 没有必要再进行限制…u003Cu002Fpu003Eu003Cpu003E下集预告: 终于蹩脚的码完了最后一行, 作为生产环境中最常用的 nginx 反向代理, 比我想象的要简单很多很多. 由于涉及到诸多配置的步骤. 有写的不明白的地方还望小伙伴们评论区一起讨论. 下一节预计聊聊服务端代理 u003Ccodeu003EServerProxyu003Cu002Fcodeu003E这个也是我要做的接口测试工具需要用到的技术方案, See you.u003Cu002Fpu003E”

原文始发于:一文读懂并实操 Nginx 反向代理

主题测试文章,只做测试使用。发布者:逗乐男神i,转转请注明出处:http://www.cxybcw.com/17766.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code