如何用proxy_pass为Nginx的/static目录请求自动追加index.html？

嘿，你当前用if的做法确实有问题——不仅Nginx官方不推荐在location里随意使用if（官方文档甚至称它为"evil"），而且你的判断逻辑根本不适用代理场景：-e是检查本地服务器的文件/目录是否存在，但你这里是要代理到后端服务器，本地根本没有这些静态资源，所以这个判断永远不成立，完全起不到作用。另外你的if语法也有错误，-e和正则匹配不能这么组合写。

给你两种更靠谱的实现方式，都是Nginx原生支持的，避免踩if的坑：

方式一：用try_files+命名location（推荐，更灵活） #

这种方式不需要依赖文件名后缀来判断是文件还是目录，而是通过后端的响应来自动处理：如果原请求返回404（说明可能是目录请求，没有对应文件），就自动追加index.html再代理一次。

location /static/ {
    # 直接代理原请求
    proxy_pass http://10.0.0.1:3000;
    # 开启拦截后端错误响应，这样Nginx才能处理后端返回的404
    proxy_intercept_errors on;
    # 当后端返回404时，跳转到命名location处理
    error_page 404 = @static_index;
}

# 命名location，处理需要追加index.html的请求
location @static_index {
    # 重写路径：把结尾带/或不带/的目录请求，追加index.html
    rewrite ^(/static/.+)/?$ $1/index.html break;
    # 代理到后端
    proxy_pass http://10.0.0.1:3000;
}

逻辑说明： #

• 对于/static/style.css这类文件请求：后端能找到对应文件，返回200，直接返回给客户端，不会触发error_page。
• 对于/static/test或/static/test/这类目录请求：后端找不到对应文件，返回404，Nginx会触发@static_index，把路径重写为/static/test/index.html后再代理到后端，此时后端能找到index.html文件，返回200。

方式二：用两个location分别匹配文件和目录 #

如果你能确定静态文件都带后缀（比如.css、.js、.png等），可以直接用正则匹配区分文件和目录请求：

# 匹配/static下带后缀的文件请求，直接代理
location ~ ^/static/.+\..+$ {
    proxy_pass http://10.0.0.1:3000;
}

# 匹配/static下的目录请求（结尾带/或不带/），追加index.html后代理
location ~ ^/static/(.*)/?$ {
    proxy_pass http://10.0.0.1:3000/static/$1/index.html;
}

注意点： #

• 这种方式依赖文件名后缀，如果你有目录名带点的情况（比如/static/test.v2/），会被错误地当成文件请求，所以方式一更稳妥。
• 两种方式里的proxy_pass都不要加结尾的/，否则Nginx会把/static/替换成/，导致代理路径变成http://10.0.0.1:3000/test而不是http://10.0.0.1:3000/static/test，不符合你的需求。

内容的提问来源于stack exchange，提问作者medium