Nginx 的 sub_filter 指令可在反向代理响应返回前动态替换 HTML 响应体中的字符串,用于修正后端生成的绝对路径以适配前端访问上下文,但要求响应未压缩、Content-Type 匹配且不跨 chunk 匹配。
使用 Nginx 的
指令可以在反向代理响应返回客户端前,动态替换 HTML 内容中的字符串,从而修正后端服务生成的绝对路径(如
或
),使其适配前端访问的域名或路径上下文。这在前后端分离、多环境部署或嵌入式集成场景中非常实用。
确保 sub_filter 生效的基本前提
Nginx 默认不会对压缩响应(如 gzip)执行替换,且
仅作用于响应体(body),不处理响应头或二进制内容。需确认以下几点:
后端返回的 Content-Encoding 必须为
(即未启用 gzip/brotli 压缩),或在 Nginx 中显式关闭压缩:
响应 Content-Type 必须匹配
设置,默认只处理
,若需处理 JS/CSS,需补充:
是逐块处理流式响应的,不支持正则、不保证跨 chunk 匹配,长文本或换行可能中断匹配 —— 建议后端输出格式化较规范的 HTML
基础用法:替换静态绝对路径前缀
例如后端返回
,但你希望用户通过
访问,则需将所有
替换为
:
}
立即学习
“
前端免费学习笔记(深入)
”;
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
下载
处理协议 + 域名类绝对 URL
若后端硬编码了完整 URL,如
,而你需要指向代理后的网关地址(如
),可用:
注意:
区分大小写且不支持通配符。若存在混合协议或子域名,建议统一后端输出相对路径,或配合
处理重定向响应头中的 Location 字段(
不处理响应头)。
安全与性能注意事项
是纯文本替换,无 HTML 解析能力,因此:
避免替换可能出现在属性值以外的位置(如误改注释、JS 字符串、JSON 内容),可加引号限定上下文:
大量替换或大响应体会影响代理吞吐量,生产环境建议结合缓存(
)减少重复处理
对于现代 SPA 应用,更推荐让前端构建时通过
或运行时配置生成相对路径,而非依赖代理层修补
sub_filterhref="/css/app.css"src="https://api.example.com/data"sub_filteridentitygzip off;sub_filter_typestext/htmlsub_filter_types text/css text/javascript;sub_filterhref="/static/js/main.js"https://myapp.com/subpath//static//subpath/static/location /subpath/ {
proxy_pass https://backend/;
proxy_set_header Host $host;
# 关键配置
sub_filter '/static/' '/subpath/static/';
sub_filter_once off; # 替换全部匹配项(默认只替换第一个)
sub_filter_types text/html text/css text/javascript;
sub_filter_last_modified off; # 避免因替换导致 Last-Modified 失效问题(可选)
# 禁用压缩以确保 sub_filter 可见原始文本
gzip off;
src="https://api.internal/v1/users"https://myapp.com/api/v1/userssub_filter 'https://api.internal/' 'https://myapp.com/api/';
sub_filter 'http://api.internal/' 'https://myapp.com/api/';sub_filterproxy_redirectsub_filtersub_filtersub_filter 'href="/' 'href="/subpath/';proxy_cachepublicPath