# 頁面內容修改 nginx可以通過向頁面底部或者頂部插入額外的css和js文件，從而實現修改頁面內容。這個功能需要額外模塊的支持，例如：[nginx_http_footer_filter](https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Falibaba%2Fnginx-http-footer-filter)或者[ngx_http_addition_module](https://link.juejin.im/?target=http%3A%2F%2Fnginx.org%2Fen%2Fdocs%2Fhttp%2Fngx_http_addition_module.html) (都需要安裝)。 <br> 工作中，經常需要切換各種測試環境，而通過switchhosts等工具切換后，有時還需要清理瀏覽器dns緩存。可以通過頁面內容修改+Nginx反向代理來實現輕松快捷的環境切換。 <br> 這里首先在本地編寫一段js代碼（switchhost.js），里面的邏輯是：在頁面插入hosts切換菜單以及點擊具體某個環境時，將該host的ip和hostname儲存在cookie中，最后刷新頁面；接著編寫一段css代碼（switchhost.css）用來設置該hosts切換菜單的樣式。 <br> 然后Nginx腳本配置： ~~~ server { listen 80; listen 443 ssl; expires -1; # 想要代理的域名 server_name m-element.kaola.com; set $root /Users/cc/Desktop/server; charset utf-8; ssl_certificate /usr/local/etc/nginx/m-element.kaola.com.crt; ssl_certificate_key /usr/local/etc/nginx/m-element.kaola.com.key; # 設置默認$switch_host，一般默認為線上host，這里的1.1.1.1隨便寫的 set $switch_host '1.1.1.1'; # 設置默認$switch_hostname，一般默認為線上'online' set $switch_hostname ''; # 從cookie中獲取環境ip if ($http_cookie ~* "switch_host=(.+?)(?=;|$)") { set $switch_host $1; } # 從cookie中獲取環境名 if ($http_cookie ~* "switch_hostname=(.+?)(?=;|$)") { set $switch_hostname $1; } location / { expires -1; index index.html; proxy_set_header Host $host; #把html頁面的gzip壓縮去掉，不然sub_filter無法替換內容 proxy_set_header Accept-Encoding ''; #反向代理到實際服務器ip proxy_pass http://$switch_host:80; #全部替換 sub_filter_once off; #ngx_http_addition_module模塊替換內容。 # 這里在頭部插入一段css，內容是hosts切換菜單的css樣式 sub_filter '</head>' '</head><link rel="stylesheet" type="text/css" media="screen" href="/local/switchhost.css" />'; #將頁面中的'網易考拉'文字后面加上環境名，便于開發識別目前環境 sub_filter '網易考拉' '網易考拉:${switch_hostname}'; #這里用了另一個模塊nginx_http_footer_filter，其實上面的模塊就行，只是為了展示用法 # 最后插入一段js，內容是hosts切換菜單的js邏輯 set $injected '<script language="javascript" src="/local/switchhost.js"></script>'; footer '${injected}'; } # 對于/local/請求，優先匹配本地文件 # 所以上面的/local/switchhost.css，/local/switchhost.js會從本地獲取 location ^~ /local/ { root $root; } } ~~~ <br> 這個功能其實為Nginx在前端開發中的應用提供了無限可能。例如，可以通過區分本地、測試和線上環境，為本地/測試環境頁面增加很多開發輔助功能：給本地頁面加一個常駐二維碼便于手機端掃碼調試；本地調試線上頁面時，在js文件底部塞入sourceMappingURL，便于本地debug等等。