Angular+Nginx部署后无法调用Heroku上的Spring API求助

问题背景 #

我是Angular新手，本地开发时通过proxy配置可以正常调用Heroku上的Spring API，但部署到AWS Lightsail的Nginx服务器后，页面能正常加载，但API调用失败。

部署步骤 #

• 执行ng build生成dist文件夹
• 将dist/my-folder-generate/内的所有文件移动到/var/www/html
• 浏览器访问页面正常，但API请求无响应

现有配置文件 #

Nginx配置 #

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    
    root /var/www/html;
    index index.html index.htm index.nginx-debian.html;
    
    server_name _;
    
    location / {
       try_files $uri $uri/ /index.html;
       error_page 405 =200 $uri;
    }
}

angular.json配置（serve部分） #

"serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "configurations": {
      "production": {
        "browserTarget": "my-app:build:production",
        "proxyConfig": "src/proxy.conf.json"
      },
      "development": {
        "browserTarget": "my-app:build:development",
        "proxyConfig": "src/proxy.conf.json"
      }
    },
    "defaultConfiguration": "development",
    "options": {
      "browserTarget": "my-app:build",
      "proxyConfig": "src/proxy.conf.json"
    }
 },

proxy.conf.json配置 #

{
  "/api": {
      "target": "https://my-api.herokuapp.com",
      "secure": false,
      "logLevel": "debug",
      "changeOrigin": true
  }
}

API调用代码 #

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
const AUTH_API = '/api/';
const httpOptions = {
  headers: new HttpHeaders({
    accept: ' application/json',
    'Content-Type': ' application/json',
  }),
};
@Injectable({
  providedIn: 'root',
})
export class AuthService {
  constructor(private http: HttpClient) {}
  login(username: string, password: string): Observable<any> {
    return this.http.post(
      AUTH_API + 'auth/login',
      {
        username,
        password,
      },
      httpOptions
    );
  }
}

解决方案 #

核心问题 #

本地的proxy.conf.json只对Angular开发服务器生效，生产环境部署后，这个配置不会被Nginx识别。Nginx需要自己配置反向代理来转发/api请求到Heroku API地址。

修改Nginx配置 #

更新你的Nginx服务器配置，添加/api的反向代理规则：

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    
    root /var/www/html;
    index index.html index.htm index.nginx-debian.html;
    
    server_name _;
    
    # 新增API反向代理
    location /api {
        proxy_pass https://my-api.herokuapp.com;
        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;
        # 处理Heroku的HTTPS跳转
        proxy_redirect http:// https://;
    }
    
    location / {
       try_files $uri $uri/ /index.html;
       error_page 405 =200 $uri;
    }
}

配置生效步骤 #

1. 保存修改后的Nginx配置文件
2. 执行sudo nginx -t验证配置语法是否正确
3. 执行sudo systemctl reload nginx让配置生效

额外检查项 #

• 确认AWS Lightsail的安全组已经开放80端口（你已经能访问页面，这步应该没问题）
• 检查Heroku API是否允许Lightsail服务器的IP访问（如果Heroku有IP白名单的话）
• 浏览器F12打开控制台，查看Network面板的API请求错误信息，比如是404/503/CORS错误，针对性排查

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