Kubernetes中Angular应用无法通过ClusterIP访问同集群Spring Boot后端

核心原因 #

浏览器通过端口转发访问Angular应用时，处于Kubernetes集群外部发起请求，你配置的Angular API基础URL service-name:port/api/ 是集群内部Service域名，该域名仅能在集群内部被DNS解析，浏览器所在本机无法识别，导致请求失败、页面无数据加载。而Angular的NGINX Pod内部能curl通后端，是因为Pod处于集群内部，可正常解析Service域名。

可行解决方案 #

方案1：本地端口转发后端服务（临时调试） #

1. 打开新终端，为后端Service做端口转发：

   kubectl port-forward service/service-name 8081:<service-port>
   

2. 修改Angular应用的API基础URL为 http://localhost:8081/api/，重新构建部署（或通过环境变量动态配置）。
3. 保持Angular应用的端口转发（例如kubectl port-forward pod/<angular-pod-name> 8080:80），浏览器访问http://localhost:8080即可正常加载数据。

方案2：配置NGINX反向代理（推荐，长期使用） #

修改Angular所在的NGINX配置，增加反向代理规则，让NGINX将前端API请求转发到集群内部的后端Service，前端使用相对路径请求即可。

修改后的NGINX配置：

server {
  listen 80;
  default_type application/octet-stream;
  gzip on;

  location / {
    root /usr/share/nginx/html;
    autoindex on;
    index index.html;
    try_files $uri $uri/ /index.html =404;
  }

  # 新增反向代理，将/api开头的请求转发到后端Service
  location /api {
    proxy_pass http://service-name:port/api;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
  
 error_page   500 502 503 504  /50x.html;
 location = /50x.html {
     root   /usr/share/nginx/html;
 }
}

同时修改Angular应用的API基础URL为 /api（相对路径），重新构建部署后，仅需端口转发Angular的NGINX服务，浏览器发起的/api/xxx请求会被NGINX转发到后端Service，无需浏览器解析集群内部域名。

方案3：同时转发两个服务（快速调试，无需修改配置） #

打开两个终端窗口，分别执行：

• 转发Angular应用：

  kubectl port-forward pod/<angular-nginx-pod-name> 8080:80
  

• 转发后端Service：

  kubectl port-forward service/service-name 8081:<service-port>
  

临时修改Angular应用的API基础URL为http://localhost:8081/api/，浏览器访问http://localhost:8080即可正常加载数据，适合快速验证接口功能。

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