如何在代理后面配置 Angular 4? [英] How to configure Angular 4 behind Proxy?

问题描述

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

I'm trying to use angular 4 application behind a proxy server (I'm using zuul as proxy server), since I'm using context path routing, I've configured zuul routes with context path. Below is the zuul routes configuration.

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 错误.

Since Angular runs with baseurl=/ I manually edited index.html and added /kp-app1/. After much of struggle analyzing packets flow using wireshark, I figured out that though index.html is retrieved properly rest of the resources such as inline.bundle.js, main.bundle.js did not had the context-path prefixed, when requesting from client to proxy, since there was no prefix, zuul was not able to match url and forward it my angular application. Finally when I build Angular application by passing base-href and deploy url though these issues are fixed. However still for images and Font Awesome I'm getting 404 error.

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

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

On analyzing pcap file. I find still angular client is requesting images with /assets/myimages.png instead of prefixing with effective request as /kp-app1/assets/myimages.png and for font awesome though it is prefixing /kp-app1 but not adding forward slash in between(/kp-app1fontawesome-webfont.af7ae505a9eed503f8b8.woff2). Hence for images and font awesome zuul url match does not work, resulting in 404 error

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

And also I tried to build with different combination of --base-href and --deploy-url and I get different index.html

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

1. if url is given with /kp-app1, for some reason angular-cli is appending git path

  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 文件，但对于图像和字体却失败了.

if url is given with /kp-app1/, effect would be same as 1.

if url is given with //kp-app1, When I configure this though it works for js and css file but fails for images and 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> ...

推荐答案

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

Ok, Finally I solved the issue. Below are the changes I made.

1. 第一个错误，我没有使用 / 对 url 进行后缀，即我使用的是 /kp-app1 而不是 /kp-app1/

2. 图像没有被加载，因为我提供了如下所示的相对路径

1. First mistake I was not postfixing the url with / that is I was using /kp-app1 instead of /kp-app1/

2. Image was not getting loaded as I was providing relative path in as shown below

<img src="../../assets/myimage.png">

当我改变它./ 图像开始被加载.

when I changed it ./ images started getting loaded.

<img src="./assets/myimage.png">

注意:在一些帖子中，我看到我们可以使用 ~ 而不是 .，不确定它是否有效，我还没有尝试过.

Note: In some post I see we can use ~ instead of ., not sure it works I've not tried.

最后在 base-href 中添加 / 前缀时附加 C:/Program Files/Git/ 的问题似乎是问题 angular cli 和 gitbash.当我使用 windows cmd 时，它得到了解决.注意我省略了 --deploy-url.我刚用过

Finally problem of appending C:/Program Files/Git/ when I prefix / in base-href it seems its a problem with angular cli with gitbash. When I used windows cmd it got sorted out. Note I omitted --deploy-url. I just used

ng build -bh /kp-app1/  

这篇关于如何在代理后面配置 Angular 4?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！