时间戳

首页 > 解决方案 > Angular Universal 中的 API/http-request 在 Docker Image 中抛出“404 not found”

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

问题描述

我有一个（外部开发的）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”。

当我在浏览器中的 localhost 上运行 Angular 项目时，这已经有效npm start- 一切都很好。

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

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

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”测试请求并且这正在工作时，它一定是在构建过程中丢失了一些东西吗？不幸的是，我还没有在文档中找到答案。如果有人有想法，很高兴，谢谢。

标签： angulardockerangular-universalangular-http-interceptors

解决方案

我发现了错误：显然我在 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':  ''}}));

推荐阅读