fetch()请求错误端点问题排查与解决（Docker多容器环境）

我的问题和另一个类似：fetch() API向后端发送请求时指向错误端点，返回405错误，但表现形式不同，我花了近一天时间排查。

我采用Docker多容器架构，通过Nginx将React前端的请求代理到Django REST Framework后端。前端未受保护的路由可正常访问，直接在浏览器输入URL也能访问后端端点，说明服务器和代理配置没有问题。

但当通过前端元素请求后端数据时遇到阻碍：例如前端需调用/api/auth/login获取登录凭证，我已在Nginx配置文件中设置/api/路径，React组件的fetch函数也使用了/api/auth/login，但请求始终发送到不存在的/auth/login，返回405错误，/api/前缀莫名丢失。

我查阅了大量Nginx配置资料仍未找到原因，希望有人能解惑。

React组件调用fetch的代码 #

const formHandler = async (event) => {
    event.preventDefault();
    const formData = {
       // 用户名/密码
    };

    const response = await fetch('/api/auth/login/', {
        method: 'POST',
        body: JSON.stringify(formData),
        headers: {
            'Content-Type': 'application/json',
        }
    })
    // 处理返回的响应数据
};

Nginx配置文件 #

server {
    listen 8080;
    location / {
        root /var/www/frontend;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
       try_files $uri @proxy_api;
    }

    location /static/ {
        autoindex on;
        root /api/;
    }

    location @proxy_api {
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header X-Url-Scheme $scheme;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_pass http://backend:8000;
    }
}

配置文件中的backend是docker-compose.yml中的服务名称。

最初我曾在React组件中误写为/auth/login，修正后问题仍存在，我以为是缓存问题，删除Docker镜像并多次执行docker-compose build和docker-compose up均无效。

更新 - 已解决
问题并非缓存所致：我将前端构建产物存储在Docker卷中，再复制到Nginx容器，但该卷的数据并未随每次构建更新。Docker不会在每次docker-compose build时重写文件夹，因此每次修改前端后删除卷即可解决问题。

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