Angular无法调用后端API（Docker+Nginx）：ERR_CONNECTION_REFUSED错误排查

1. 前端请求地址是核心问题 #

你前端代码里写的https://localhost:8080/api/convert/text存在本质错误：

• 如果是浏览器发起请求，localhost指的是用户自己的本地机器，不是部署服务的VPS；
• 如果是Angular容器内部发起请求，localhost指的是Angular容器本身，不是Spring Boot容器。
  两种场景都无法正确访问到后端服务。

修正方向： #

• 用Nginx反向代理的话，把请求改成相对路径，比如/api/convert/text，让Nginx负责转发到后端；
• 容器间直接通信的话，把localhost换成Docker Compose里的后端服务名（比如backend，需和compose配置里的服务名一致），因为Docker Compose会自动创建内部DNS，容器间可通过服务名互相访问；
• 允许外部直接访问后端的话，换成VPS的公网IP或域名，比如https://your-vps-ip:8080/api/convert/text。

2. Docker Compose配置检查 #

确保以下几点：

• 前后端服务在同一个Docker网络中（默认compose会创建默认网络，只要在同一个compose文件里就没问题）；
• 后端服务的端口配置正确：如果需要外部访问，要做端口映射（比如8080:8080）；如果仅容器间访问，内部端口8080可正常使用，无需映射；
• 服务名配置清晰，方便容器间调用。

示例正确配置片段：

services:
  frontend:
    build: ./frontend
    ports:
      - "80:80" # Nginx对外端口
    networks:
      - app-network
  backend:
    build: ./backend
    ports:
      - "8080:8080" # 后端对外端口（可选，若仅容器间访问可去掉）
    networks:
      - app-network
networks:
  app-network:
    driver: bridge

3. Nginx配置检查（若使用代理） #

必须配置/api路径的转发规则，指向后端服务名而非localhost：

server {
    listen 80;
    server_name your-vps-ip-or-domain; # 替换为你的VPSIP或域名

    # 处理Angular单页应用路由
    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }

    # 转发API请求到后端
    location /api/ {
        proxy_pass http://backend:8080/; # 这里用compose里的后端服务名
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

注意：Nginx容器里的localhost指向自身，必须用后端服务名才能正确转发。

4. 前端请求代码修正 #

如果用Nginx代理，app.service.ts里的请求改成相对路径即可：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AppService {
  private apiUrl = '/api/convert/text'; // 相对路径，由Nginx转发

  constructor(private http: HttpClient) { }

  convertText(data: any) {
    return this.http.post(this.apiUrl, data);
  }
}

5. 后端Controller与启动状态检查 #

• 确认Controller的@RequestMapping路径和前端请求匹配，示例：

@RestController
@RequestMapping("/api/convert")
public class ConverterController {

    @PostMapping("/text")
    public ResponseEntity<String> convertText(@RequestBody String text) {
        // 业务处理逻辑
        return ResponseEntity.ok("转换完成");
    }
}

• 查看后端容器启动日志，确认服务在8080端口正常监听，无报错信息。

6. 容器间连通性测试 #

在Angular容器内测试能否访问后端服务：

docker exec -it <前端容器名称> ping backend

如果能ping通，说明网络配置正常；如果不通，检查Docker网络是否正确创建。

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