前端JS跨Docker容器发送Ajax请求失败，疑关联Nginx配置

这种情况我碰到过好多次，十有八九是Nginx反向代理配置出了问题，导致前端的请求没有正确转发到API容器，反而落到了前端容器自身的路由里。咱们一步步拆解排查：

1. 前端请求的URL路径是否正确？ #

如果前端代码里用了相对路径（比如/api/send-email），但Nginx没有配置对应的转发规则，请求就会被前端容器的Nginx处理——而前端容器里根本没有/api/send-email这个路由，自然会返回前端的404页面或者默认页面，看起来就像请求“发回了前端容器”。

解决思路：

• 要么前端请求时指定API容器的服务名（Docker Compose环境下）或IP+端口，比如http://api-service:8000/api/send-email；
• 更推荐的方式是通过Nginx反向代理统一处理，避免前端硬编码地址。

2. Nginx反向代理规则是否缺失或错误？ #

这是最常见的原因。前端容器的Nginx配置里，必须添加专门的规则，把API相关的请求转发到API容器。

举个正确的配置示例：

server {
    listen 80;
    server_name localhost;

    # 处理前端静态资源
    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }

    # 转发API请求到API容器
    location /api/ {
        # 这里的api-service是Docker Compose中API容器的服务名，8000是API服务的端口
        proxy_pass http://api-service:8000/;
        # 传递必要的请求头，避免API端出现异常
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

需要注意的坑：

• 不要用localhost作为proxy_pass的地址——Docker容器里的localhost指的是容器自身，不是宿主机或其他容器；
• 确保proxy_pass末尾的斜杠和请求路径匹配，避免路径拼接错误（比如/api/转发到http://api-service:8000/，会把/api/send-email变成/send-email发给API）。

3. Docker容器是否在同一网络？ #

如果前端和API容器不在同一个Docker网络里，就算Nginx配置了正确的服务名，也无法解析到API容器的地址，请求自然会失败。

解决方式：

• 如果用Docker Compose，默认会给所有服务创建一个自定义网络，只要两个服务都在同一个services块下，就会自动加入该网络；
• 如果是手动启动容器，需要创建一个自定义网络，启动容器时指定--network参数加入该网络。

示例Docker Compose配置：

version: '3.8'
services:
  frontend:
    build: ./frontend
    ports:
      - "80:80"
    networks:
      - app-network
  api:
    build: ./api
    ports:
      - "8000:8000"
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

4. 验证API容器是否可访问 #

可以在前端容器里执行curl命令，测试是否能正常访问API容器：

# 进入前端容器
docker exec -it <frontend-container-name> bash
# 尝试调用API端点
curl http://api-service:8000/api/send-email

如果curl能成功返回结果，说明网络和API服务本身没问题，问题还是出在Nginx或前端请求配置上；如果curl失败，先排查网络或API服务是否正常启动。

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