Angular Universal 中的 API/http-request 在 Docker Image 中抛出“404 not found”答案

【问题标题】：API/http-request in Angular Universal throws "404 not found" in Docker ImageAngular Universal 中的 API/http-request 在 Docker Image 中抛出“404 not found”
【发布时间】：2021-10-30 17:16:34
【问题描述】：

我有一个（外部开发的）Angular 应用程序，其中还包括 Angular Universal。该项目中已经构建了两个不同的目标/API 域（称为 api-url-1 和 api-url-2），我添加了第三个（称为 new-api-url）。因此我补充说：

proxy.config.json：

{
"/api-1": {
    "target": "https://api-url-1",
    "secure": false,
    "changeOrigin": true
  },
  "/api-2": {
    "target":  "https://api-url-2",
    "secure": false,
    "changeOrigin": true
  },
  "/new-api": {
    "target":  "https://new-api-url",
    "secure": false,
    "logLevel": "debug",
    "pathRewrite": { "^/new-api":  ""},
    "changeOrigin": true
  }
}

在 universal.interceptor.ts 和 server.ts 中，我添加了与现有 API 相同的代码行，其中包含自定义名称，因此“localhost :4200/new-api/xyz" 变为 "new-api-url/xyz"。

当我在浏览器的本地主机上使用npm start 运行 Angular 项目时，这已经可以工作了 - 一切都很好。

但现在我想用它构建一个 Docker 映像和容器 - 在那里，新的 API 不工作 - 其他人可以。

我用npm run build:ssr 构建了这个项目（也已经用baseUrl 尝试过build:ssr-deploy ./）

Dockerfile

FROM node:14.15.5-alpine3.13

RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

COPY package*.json /usr/src/app/
COPY proxy.conf.json /usr/src/app/
COPY ./node_modules /usr/src/app/node_modules
COPY ./dist /usr/src/app/dist

ENV PORT=80
EXPOSE $PORT

CMD [ "npm", "run", "serve:ssr" ]

当我构建映像并运行容器时，原来的两个 API 可以工作，所以当我在浏览器中检查网络时，请求 URL 显示状态为 200 的“localhost:1234/api-1/xyz”。

但是对于我添加的 API，它显示“localhost:1234/new-api/abc”，状态为 404 未找到。当我在一个新的浏览器选项卡中使用真实的 URL 而不是“localhost”测试请求并且这正在工作时，它一定是在构建过程中丢失了一些东西吗？不幸的是，我还没有在文档中找到答案。如果有人有想法，我很高兴，谢谢。

【问题讨论】：

标签： angular docker angular-universal angular-http-interceptors

【解决方案1】：

我发现了错误：显然我在 proxy.conf.json 中为 new-api 定义了一个“pathRewrite”，但我忘了在 server.ts 中添加相同的内容，因为我不知道这两个文件不能一起工作。

server.ts 已更正：

  server.use('/api-1', createProxyMiddleware({target: proxyTarget, changeOrigin: true, logLevel: 'info'}));
  server.use('/api-2', createProxyMiddleware({target: proxyCmsTarget, changeOrigin: true, logLevel: 'info'}));
  server.use('/new-api', createProxyMiddleware({target: proxyTargetGls, changeOrigin: true, logLevel: 'debug', pathRewrite: { '^/new-api':  ''}}));

【讨论】：