如何配置Angular4后面的Proxy？

Question

我正在尝试在代理服务器后面使用 angular 4 应用程序（我正在使用 zuul 作为代理服务器），因为我使用的是上下文路径路由，所以我已经使用上下文配置了 zuul 路由小路。下面是zuul路由配置。

kp-app1:
  path: /kp-app1/**
  retryable: true
  serviceId: kp-app1
  strip-prefix: false

由于 Angular 与 baseurl=/ 一起运行，我手动编辑了 index.html 并添加了 /kp-app1/。经过大量使用 wireshark 分析数据包流的努力之后，我发现虽然 index.html 被正确检索，但其他资源（例如 inline.bundle.js, main.bundle.js 没有前缀上下文路径，当从客户端请求到代理时，由于没有前缀，zuul 无法匹配 url 并将其转发到我的 angular 应用程序。最后，当我通过传递 base-href 和部署 url 构建 Angular 应用程序时，尽管这些问题已得到修复。但是对于图片和 Font Awesome，我仍然遇到 404 错误。

ng build --base-href="//kp-app1" --deploy-url="//kp-app1"

关于分析pcap文件。我发现仍然 angular 客户端正在请求带有 /assets/myimages.png 的图像，而不是将有效请求作为前缀作为 /kp-app1/assets/myimages.png 和字体真棒虽然它是前缀 /kp-app1 但没有在两者之间添加正斜杠（ /kp-app1fontawesome-webfont.af7ae505a9eed503f8b8.woff2)。因此对于图像和字体 awesome zuul url 匹配不起作用，导致 404 错误

我还尝试使用 --base-href 和 --deploy-url 的不同组合进行构建，但我得到了不同的 index.html

如果 url 与 /kp-app1 一起给出，出于某种原因 angular-cli 附加 git 路径

  cmd: ng build --base-href="/kp-app1" --deploy-url="/kp-app1"
  output: <base href="C:/Program Files/Git/kp-app1/">
          <script type="text/javascript" src="C:/Program Files/Git/kp-app1/inline.bundle.js"></script> ...

如果url与/kp-app1/一起给出，效果与1相同。

如果 url 与 //kp-app1 一起给出，当我配置它时虽然它适用于 js 和 css 文件但对图像和 fontawesome 失败。

  cmd: ng build --base-href="//kp-app1" --deploy-url="//kp-app1"
  output: <base href="/kp-app1">
          <script type="text/javascript" src="/kp-app1/inline.bundle.js"></script> ...

如果 url 与 //kp-app1/ 一起给出。

  cmd: ng build --base-href="//kp-app1/" --deploy-url="//kp-app1/"
  output: <base href="//kp-app1/">
          <script type="text/javascript" src="//kp-app1/inline.bundle.js"></script> ...

Answer 1

好的，我终于解决了这个问题。以下是我所做的更改。

第一个错误我没有post用/修复url，我使用的是/kp-app1而不是/kp-app1/
图片没有加载，因为我提供了如下所示的相对路径
```
<img src="../../assets/myimage.png">
```
当我更改它时 ./ 图像开始加载。
```
<img src="./assets/myimage.png">
```
注意： 在一些 post 中，我看到我们可以使用 ~ 而不是 .，不确定它是否有效我没有试过了。
最后，当我在 base-href 中添加 / 前缀时，附加 C:/Program Files/Git/ 的问题似乎是 problem with angular cli with gitbash。当我使用 windows cmd 时，它被整理出来了。注意我省略了 --deploy-url。我刚刚使用
```
ng build -bh /kp-app1/  
```

如何配置Angular4后面的Proxy？

How to configure Angular 4 behind Proxy?

proxy

webpack

netflix-zuul

angular-cli

angular