url在tomcat 8服务器上重写Angular 4

Posted 2023-03-05

【中文标题】url在tomcat 8服务器上重写Angular 4

【英文标题】：Url rewriting Angular 4 on tomcat 8 server

【发布时间】：2018-12-05 04:11:10

【问题描述】：

我已经在 tomcat 服务器上部署了一个 angular 4 应用程序（带有角度路由），带有“frontend-maven-plugin”（V1.6），但 url comportement 很奇怪。

事实上，当我点击所有页面上的刷新按钮时，会出现 HTTP 404 错误。 当我尝试访问根页面时，没有重定向到 index.html。

这些错误仅存在于 tomcat 部署中（它适用于 nodejs）。

我如何配置 tomcat 来解决这个问题？

感谢您的回复。

【问题讨论】：

***.com/questions/39018765/…

***.com/questions/40852931/…

感谢 Vikas，但这只是正确的 index.html 重定向，而不是路由 url 上的刷新操作。

angular.io/guide/…

刷新后，您的整个应用程序将重新加载，您可以选择上述配置或使用hash Location strategy

【参考方案1】：

我认为您收到 404 是因为您请求的 http://localhost/route 在 Tomcat 服务器上不存在。由于 Angular 2 默认使用 html 5 路由，而不是在 URL 末尾使用哈希，因此刷新页面看起来像是对不同资源的请求。

在 tomcat 上使用角度路由时，您需要确保服务器在刷新页面时将应用程序中的所有路由映射到主 index.html。有多种方法可以解决此问题。无论哪种适合您，您都可以选择。

1) 将以下代码放入部署文件夹的 web.xml 中：

<error-page>
     <error-code>404</error-code>
     <location>/index.html</location>
</error-page>

2) 您也可以尝试在路由的 URL 中使用带有 # 的 HashLocationStrategy

尝试使用：

RouterModule.forRoot(routes, useHash: true )

代替：

RouterModule.forRoot(路由)

使用 HashLocationStrategy 你的网址会是这样的：

http://localhost/#/路由

3) Tomcat URL Rewrite Valve：如果找不到资源，则使用服务器级配置重写 url 以重定向到 index.html。

3.1) 在 META-INF 文件夹中创建一个文件 context.xml 并在其中复制以下上下文。

<?xml version="1.0" encoding="utf-8"?>
<Context>
  <Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />
</Context>

3.2) 在WEB-INF中，创建rewrite.config文件（该文件包含URL重写规则，tomcat使用URL重写）。 在 rewrite.config 中，复制以下内容：

RewriteCond %SERVLET_PATH !-f
RewriteRule ^/(.*)$ /index.html [L]

【讨论】：

嗨。我正在尝试您的解决方案，但仍然不适合我。

在提到的 3 个解决方案中，您正在尝试哪种解决方案？

选项 3 也适用于使用部署到 tomcat 的客户端路由的反应应用程序。

如果您在 tomcat 服务器中部署了多个 Angular 项目，您将在 rewrite.config 中进行哪些更改？

【参考方案2】：

当您的应用程序部署在 ROOT 中时，上述 Valve 配置可以正常工作。如果您要部署到不同的应用程序上下文，这里是配置：

<Context path="/my-context-path" docBase="C:/apache-tomcat-10.0.0-M4/webapps/my-context-path">
    <Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />
</Context>

【参考方案3】：

如果没有服务器上的重定向规则，应用程序深层链接将无法工作。所有深层链接都必须由服务器重定向到应用程序index.html。

设置 tomcat 以重定向任何深层链接 -

在 server.xml 中配置 RewriteValve 在rewrite.config中写入重写规则

1.在 server.xml 中配置 RewriteValve

编辑 ~/conf/server.xml 以在 Host 部分中添加以下 Valve，如下所示 -

...
      <Host name="localhost"  appBase="webapps"
            unpackWARs="true" autoDeploy="true">

        <Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />

...
      </Host>
...

2。在rewrite.config中写重写规则

创建目录结构 - ~/conf/Catalina/localhost/ 并在其中创建 rewrite.config 文件，内容如下。注意 - 这里我考虑将 /hello 作为应用程序的上下文路径。

RewriteCond %REQUEST_PATH !-f
RewriteRule ^/hello/(.*) /hello/index.html

设置完成后重启 tomcat 服务器，您可以点击应用程序的深层链接，该链接将路由到 Angular 应用程序内的正确组件。

您可以参考this post了解更多详情。

【讨论】：

对上述答案投了反对票，因为人们通过从另一个网站复制粘贴来回应并且永远不了解问题的症结所在。在 apache tomcat 上重写适用于深度链接，但是其他功能被破坏了，这只能通过在 web.xml 中添加一个条目来修复，它告诉服务器对于遇到的任何 404，它应该重定向到基本 url，然后从哪里角度控制

如果您在 tomcat 服务器中部署了多个 Angular 项目，您将在 rewrite.config 中进行哪些更改？

你可以有它如下 - RewriteCond %REQUEST_PATH !-f RewriteRule ^/app1/(.*) /app1/index.html RewriteCond %REQUEST_PATH !-f RewriteRule ^/app2/(.*) /app2/index.html

@NithinKumarBiliya 你能解释一下 RewriteRule 吗？

任何进入 nginx 的 URL /hello/<anything> 请求都将被发回 hello angular 应用的 index.html 文件