Docker部署Angular应用Nginx代理REST API返回404问题

云原生阿岚

2026-8-28

问题根因

proxy.conf.json 是 Angular 本地开发服务器 ng serve 专属的代理配置，仅在本地开发调试阶段生效，执行生产构建、部署到Nginx后该配置不会被打包、也不会自动生效。
当前Nginx配置仅包含静态资源托管、Angular前端路由重写规则，没有配置 /rest 前缀路径的反向代理逻辑，因此Nginx收到 /rest 开头的API请求时，会默认到本地静态资源根目录 /usr/share/nginx/html 下查找对应路径的文件，找不到就抛出日志里的「No such file or directory」错误，最终返回404。
另外你配置的Docker daemon代理仅作用于Docker拉取镜像、容器内部进程主动走系统代理访问外网的场景，和Nginx的请求转发逻辑无关，不会代为处理API转发。

修复步骤

第一步：更新Nginx配置，补充反向代理规则
替换原有 nginx.conf 内容，新增 /rest 路径的转发规则，和本地开发代理行为对齐，同时修正原配置里根路径Angular路由刷新404的问题：

server {
    listen 80;
    listen [::]:80;

    root /usr/share/nginx/html;
    index index.html index.htm;

    server_name 10.168.8.59;

    # 新增/rest路径反向代理，替代本地开发时的proxy.conf.json能力
    location /rest/ {
        proxy_pass https://subdomain.maindomin.com/;
        proxy_ssl_server_name on;
        proxy_set_header Host subdomain.maindomin.com;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        # 对应本地proxy配置的secure: false，跳过目标站点SSL证书校验
        proxy_ssl_verify off;
    }

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /plan/ {
        try_files $uri $uri/ /plan/index.html;
    }
}

第二步：清理前端代码里的无效请求头
Access-Control-Allow-Origin 是HTTP响应头，需要由API服务端返回，前端在请求头中携带该字段没有任何实际作用，部分场景下还会触发CORS预检请求失败，直接从headers配置中删除该行即可。修正后的headers代码如下：

const headers = new HttpHeaders()
.set('cache-control', 'no-cache')
.set('content-type', 'application/json')
.append('Authorization', 'Bearer ' + token)

第三步：重新构建Docker镜像并启动验证
配置修改完成后重新执行Docker镜像构建、启动容器，所有 /rest 前缀的请求会被Nginx自动转发到目标第三方API地址，不会再出现本地静态文件查找失败的问题。

补充说明：如果生产环境部署的服务器本身需要走企业代理才能访问第三方API地址，需要在Nginx配置中额外增加proxy_set_header Proxy-Authorization相关配置，或者给Nginx容器配置对应的HTTP_PROXY/HTTPS_PROXY环境变量即可。

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