Angular邮件验证链接无法触发路由问题求助（Tomcat/IIS部署）

核心原因 #

Angular是单页应用（SPA），所有路由逻辑都在客户端处理。当直接访问/account/verify-email这类子路由时，Tomcat/IIS会尝试查找服务器上对应的物理文件，而这类文件并不存在，因此返回404错误。需要配置Web服务器，将所有非静态资源的请求转发到Angular的入口文件index.html，由Angular接管路由处理。

解决步骤 #

1. 确认Angular构建的Base Href配置 #

构建Angular应用时，需确保base href与部署路径匹配：

• 如果部署在Web服务器的根目录（如Tomcat的webapps/ROOT、IIS站点根目录），使用以下命令构建：

  ng build --prod
  

• 如果部署在子目录（如/account），构建时指定base href：

  ng build --prod --base-href /account/
  

• 检查构建后index.html中的<base href="/">是否与部署路径一致。

2. Tomcat服务器配置 #

方法一：通过错误页面转发

在Angular项目的src目录下创建WEB-INF/web.xml文件，内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>
</web-app>

构建完成后，将WEB-INF文件夹复制到Tomcat部署目录的根目录下。

方法二：使用URL重写（Tomcat 8+）

1. 在部署目录的WEB-INF下创建rewrite.config文件：

RewriteCond %{REQUEST_URI} !^.*\.(css|js|html|png|jpg|jpeg|gif|ico|svg|eot|ttf|woff|woff2)$
RewriteRule ^(.*)$ /index.html [L]

2. 打开Tomcat的conf/server.xml，在对应的<Host>标签内添加Rewrite Valve：

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

3. IIS服务器配置 #

1. 先安装IIS的URL Rewrite扩展。
2. 在Angular部署目录下创建web.config文件，内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

3. 如果部署在IIS的子目录（如/account），将<action>中的url="/index.html"修改为/account/index.html。

4. 验证链接路径 #

确认邮件中的验证链接路径与部署后的路由规则匹配。根据你的AccountRoutingModule配置，完整路径应为http://rejkid.hopto.org:8080/account/verify-email?token=xxx，需确保base href配置正确，避免路径错位。

内容的提问来源于stack exchange，提问作者Janciu