Apache 反向代理不向客户端呈现 Angular 构建的 javascript答案

【问题标题】：Apache reverse proxy not rendering angular builds's javascript to the clientApache 反向代理不向客户端呈现 Angular 构建的 javascript
【发布时间】：2020-04-15 10:33:57
【问题描述】：

我正在尝试为我的 2 个站点实现反向代理，但其中一个站点未呈现 html。

下面是我的 apache ssl config 配置文件

<IfModule mod_ssl.c>
        <VirtualHost _default_:443>
                ServerAdmin webmaster@localhost
                ServerName xxxx.xxxx.org

                DocumentRoot /var/www/html
                ProxyPreserveHost off
                SSLProxyEngine On
                SSLProxyVerify none
                SSLProxyCheckPeerCN off
                SSLProxyCheckPeerName off
                SSLProxyCheckPeerExpire off
                <Proxy *>
                        Order deny,allow
                        Allow from all
                </Proxy>
                <Location />
                        ProxyPass https://localhost:3000/
                        ProxyPassReverse https://localhost:3000/
                </Location>
                <Location /app1>

                        ProxyPass  http://localhost:4200/
                        ProxyPassReverse  http://localhost:4200/

                </Location>

                # Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
                # error, crit, alert, emerg.
                # It is also possible to configure the loglevel for particular
                # modules, e.g.
                #LogLevel info ssl:warn

                ErrorLog ${APACHE_LOG_DIR}/error.log
                CustomLog ${APACHE_LOG_DIR}/access.log combined

                # For most configuration files from conf-available/, which are
                # enabled or disabled at a global level, it is possible to
                # include a line for only one particular virtual host. For example the
                # following line enables the CGI configuration for this host only
                # after it has been globally disabled with "a2disconf".
                #Include conf-available/serve-cgi-bin.conf

                #   SSL Engine Switch:
                #   Enable/Disable SSL for this virtual host.
                SSLEngine on

                #   A self-signed (snakeoil) certificate can be created by installing
                #   the ssl-cert package. See
                #   /usr/share/doc/apache2/README.Debian.gz for more info.
                #   If both key and certificate are stored in the same file, only the
                #   SSLCertificateFile directive is needed.
                SSLCertificateFile      /etc/apache2/sites-available/ssl-certificate/xxxxxccc.crt
                SSLCertificateKeyFile  /etc/apache2/sites-available/ssl-certificate/xxxx.xxxx.org.key
                SSLCertificateChainFile /etc/apache2/sites-available/ssl-certificate/sf_bundle-g2-g1.crt

现在我正在尝试使用 https://xxx.fghjk.org/app1 访问我的服务器，但它显示空白页。我观察到此页面无法加载由 Angular 应用程序构建的 java 脚本文件。

有任何建议

【问题讨论】：

如果您在浏览器开发者控制台中检查，未渲染文件的 url 是什么，如果您尝试直接从 :4200 获取该文件的路径是什么？
server/runtime-es2015.edb2fcf2778e7bf1d426.js@DusanBajic
server.org:4200/runtime-es2015.edb2fcf2778e7bf1d426.js 可以看到这里的内容
嗯，mod 代理不会更改应用程序的 html 内容中的引用，因此您需要使用 .js 文件的相对路径，或使用 mod_substitute（或类似的东西）来重写这些引用（到添加前导/app1)
我没听懂你。 mod_proxy_html @DusanBajic 怎么样

标签： angularjs apache apache2 devops

【解决方案1】：

您面临的问题很可能是由于 Angular 用于从 index.html 检索 js 和 css 文件的引用。因此，在像您这样的设置中，有必要在index.html 中设置<base> 标签。

在您的情况下，它需要是<base href="/app1">。

请参阅https://angular.io/guide/deployment 了解更多详细信息或如何正确设置基本 URL 的替代方法。

【讨论】：