Angular App 无法与 Nginx Docker 容器中的 API 通信答案

【问题标题】：Angular App Not Communicating with API from Nginx Docker ContainerAngular App 无法与 Nginx Docker 容器中的 API 通信
【发布时间】：2020-09-29 04:57:49
【问题描述】：

我在由 Google Cloud 托管的 docker 容器中（在端口 443 上）有一个 Java REST API。

我有一个 Angular Web 应用程序，我可以使用 ng serve 在我的本地计算机上部署它，它可以按预期与其余 API 通信。

我正在尝试对 Angular 应用程序进行 docker 化，以便可以将其与 API 一起部署在云上。但是，当我在 docker 容器中使用 nginx 运行应用程序后，它会显示网页，但无法再与 API 通信。

Dockerfile：

FROM nginx:1.19.0-alpine
COPY /dist/app /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

nginx.conf：

server {
    listen   80;

    root /usr/share/nginx/html;
    index index.html;

    server_name _;

    location / {
        try_files $uri /index.html;
    }
}

运行 Angular 应用程序的命令：

Docker run -d -p 80:80 app

我不确定是否需要向 nginx 或 Docker 指定 API 位于端口 443 上的 [IP 地址]。

编辑：这是 Angular 应用程序中唯一提到 API url 的地方：

export class ObjectService {

  private baseUrl = 'http://[ip address]:443/api-app/api/v1/objects';

constructor(private http: HttpClient) { }

  getObject(id: number): Observable<any> {
    return this.http.get(`${this.baseUrl}/${id}`);
  }

...

【问题讨论】：

Angular Web 应用配置中的 API URL 是什么？你确定你已经正确配置了吗？
编辑：使用此信息更新问题

标签： angular docker rest nginx google-cloud-platform

【解决方案1】：

原来问题在于 API 上的 CrossOrigin 设置。它被设置为只接受来自 localhost:4200 的请求，默认情况下这是 ng serve 的主机。

【讨论】：