angular 通用中的代理

Question

我正在参与 Angular Universal 制作的项目。

为了 SEO，我需要将 blog.mywebsite.com 更改为 mywebsite.com/blog，我在 ng start 中使用了 proxy-config，如下面的代码，它可以正常工作，但是当我运行build:ssr

构建的项目没有错误，就在运行 node dist / server.js 显示网站之后，但我调用 mywebsite.com / mag 我重定向到 404 页面，而 npm start

  "scripts": {
   "ng": "ng",
   "build": "ng build --prod",
   "start": "ng serve -o  --proxy-config src/proxy.conf.json ",
   "extract": "ng xi18n --output-path=locale",
   "build:ssr": "npm run build:client-and-server-bundles  && npm run 
    webpack:server ",
   "serve:ssr": "node dist/server.js",
   "build:client-and-server-bundles": "ng build --prod && ng run 
     angular.io-example:server",
  "webpack:server": "webpack --config webpack.server.config.js --devServer -- 
   progress --colors"
  },

这是我的配置代理文件：

  {
    "/mag": {
      "target": {
      "host": "mag.mywebsite.com",
      "protocol": "http:",
      "port": 80
     },
     "secure": false,
     "changeOrigin": true,
     "logLevel": "info",
     "pathRewrite": {"^/mag" : ""}
  }
}

Answer 1

您可以在应用的快速服务器中配置代理。 Serving Angular Universal 不会使用 ng serve 使用的代理配置，因此它会尝试调用相关域（即本地运行时的本地主机和端口）。给出的答案 here 解释了如何添加快速代理。总结：

在您的 src/server.ts 文件中，添加

import * as proxy from 'http-proxy-middleware'

const apiProxy = proxy('/api', { target: 'http://localhost:8080' });
app.use('/api', apiProxy);

显然，在构建生产环境时您不会希望这样做。

Answer 2

已接受的答案已弃用，since angular 12 我们可以像往常一样使用 --proxy-config 标志 :D

angular 通用中的代理

proxy in angular universal

proxy

node.js

universal

angular