# 页面内容修改 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等等。