Docker环境下React+Nginx调用API容器出现405错误求助

我有一个部署在Docker容器中的React项目，已构建完成并运行在Nginx上，通过docker-compose与api、sql容器组网。三个容器之间可互相ping通，但React调用api时浏览器返回405错误，需要配置处理POST请求的方法。

相关配置 #

docker-compose配置文件 #

version: '3.9'

services:

  # UI Container spec. note that 'ui' is the name of the container internally (also 'container_name')
  ui:
    container_name: ps-ui-prod
    image: ps-ui-prod
    build:
      context: ./UI
      dockerfile: DockerFile_UI.prod    
    ports:
      - 1337:80
    

  # Database Container spec.
  sql:
    container_name: ps-sql
    image: ps-sql
    environment:
      ACCEPT_EULA: 'Y'
      SA_PASSWORD: 'Pa55w0rd'
    build:
      context: ./DockerDB
      dockerfile: DockerFile_SQL
    ports:
      - 1633:1433 # Map 1433 from inside the container to 1633 host to avoid port conflict with local install

  # API container spec.
  api:
    container_name: ps-api
    image: ps-api
    build:
      context: ./Api
      dockerfile: DockerFile_API
    environment:
      ASPNETCORE_ENVIRONMENT: Development
      ASPNETCORE_URLS: http://+:5555
    ports:
        - "5555:5555"

API容器IP查询结果 #

docker inspect -f '{{range.NetworkSettings.Networks}}{{.IPAddress}}{{end}}' ps-api      
    172.21.0.3

React代理配置 #

"proxy": "http://api:5555"

当前Nginx配置文件 #

server {

  listen 80;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }

}

解决方案 #

核心问题 #

React的proxy配置仅在开发环境生效，生产环境构建后，浏览器直接向Nginx发起请求，需要Nginx配置反向代理来转发API请求到api容器。405错误本质是Nginx没有正确处理API路径的POST请求，而是将其当作静态资源请求处理。

修改Nginx配置 #

更新Nginx配置文件，添加API请求的反向代理规则：

server {

  listen 80;

  # 处理React静态资源与路由
  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  # 反向代理API请求
  location /api {
    proxy_pass http://api:5555;
    proxy_set_header Host $host;
    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;
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }

}

配置说明 #

• location /api：匹配所有以/api开头的请求，转发到api容器的5555端口（docker-compose默认网络支持通过服务名api访问容器）
• proxy_set_header系列配置：传递必要的请求头，确保API服务能正确识别请求来源和协议
• 若你的API路径不是以/api开头，需调整location匹配规则（避免与静态资源路径冲突）

后续操作 #

1. 将修改后的Nginx配置文件替换UI容器内的对应文件（或修改DockerFile_UI.prod，确保构建时复制新配置）
2. 重新构建UI镜像并启动容器：

docker-compose up --build ui

额外检查 #

确认ASP.NET Core API的接口已正确配置[HttpPost]属性，确保API本身允许POST请求：

[ApiController]
[Route("api/[controller]")]
public class YourController : ControllerBase
{
    [HttpPost]
    public IActionResult Post([FromBody] YourModel model)
    {
        // 处理逻辑
        return Ok();
    }
}

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