如何修复Nginx反向代理S3时的路径错误问题

核心原因是Angular属于单页应用（SPA），所有前端路由逻辑都在浏览器端处理。当你刷新/app1/news这类子路径时，浏览器会直接向服务器发起该路径的请求，而当前Nginx会把这个请求转发到S3的app1/news路径，但S3中并没有这个文件（仅存在app1/index.html和app1/assets/下的资源），因此返回S3的Access Denied错误。

要实现无需逐个添加子路径规则的效果，只需让Nginx把所有非静态资源的请求都重定向到app1/index.html，交由Angular的前端路由来处理路径。具体配置如下：

Nginx配置示例 #

server {
    listen 80;
    server_name timemachine.com;

    # 优先处理assets静态资源，直接转发到S3对应路径
    location ^~ /app1/assets/ {
        proxy_pass https://your-s3-bucket.s3-region.amazonaws.com/app1/assets/;
        proxy_set_header Host your-s3-bucket.s3-region.amazonaws.com;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # 处理其他静态文件（如main.js、styles.css等，均在app1根目录下）
    location ~* /app1/.*\.(js|css|html|png|jpg|jpeg|gif|ico|svg)$ {
        proxy_pass https://your-s3-bucket.s3-region.amazonaws.com;
        proxy_set_header Host your-s3-bucket.s3-region.amazonaws.com;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # 处理app1下的所有子路径请求，重写到index.html
    location /app1/ {
        rewrite ^/app1/(.*)$ /app1/index.html break;
        proxy_pass https://your-s3-bucket.s3-region.amazonaws.com;
        proxy_set_header Host your-s3-bucket.s3-region.amazonaws.com;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        # 传递原始请求路径，让Angular能正确解析前端路由
        proxy_set_header X-Original-URI $request_uri;
    }
}

配置说明 #

• ^~ /app1/assets/：优先匹配assets路径，直接转发到S3对应资源，保证静态资源正常加载。
• 第二个location匹配所有常见静态文件后缀，确保这些文件能直接从S3获取，避免误走到index.html。
• 最后一个location处理app1下的其他所有请求，通过rewrite将路径重写到app1/index.html，同时保留原始请求头，让Angular能根据原始路径解析路由。

额外注意事项 #

• 确保S3桶的权限配置正确，Nginx所在容器具备访问S3对应路径的权限（可通过IAM角色或访问密钥配置）。
• 若ALB已做路径转发，需保证ALB仅将/app1/*的请求转发到Nginx容器，不要覆盖Nginx的重写逻辑。

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