Azure应用中web.config的URL Rewrite规则不生效问题排查

你的URL重写规则不生效的核心原因是：URL中的#属于浏览器端哈希片段，这部分内容不会被发送到服务器，因此IIS的URL重写规则根本无法匹配到#后面的内容。服务器实际收到的请求路径只有/Spa/de/，#/..部分完全留在浏览器本地，自然不会触发重定向逻辑。

根据你的需求，分两种场景给出对应方案：

场景1：仅重定向/Spa/de/路径（不关心哈希内容） #

如果只需要将所有访问/Spa/de/开头的请求重定向到/Spa/en/，同时保留原哈希片段（浏览器会自动保留），可以修改web.config规则如下：

<system.webServer>
    <rewrite>
        <rules>
            <!-- 优先处理de到en的重定向 -->
            <rule name="Redirect from de to en" enabled="true" stopProcessing="true">
                <match url="^Spa/de/(.*)" />
                <action type="Redirect" url="Spa/en/{R:1}" redirectType="Permanent" />
            </rule>
            <!-- 保留Angular单页应用的核心重写规则，避免路由404 -->
            <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="/Spa/en/" />
            </rule>
        </rules>
    </rewrite>
</system.webServer>

• 调整match url为^Spa/de/(.*)，精准匹配域名后以Spa/de/开头的路径
• 添加redirectType="Permanent"（或Temporary），明确重定向类型，同时帮助浏览器缓存规则
• 必须保留Angular的默认重写规则，否则单页应用刷新会出现404

场景2：需要匹配哈希片段中的内容 #

如果需要根据#后面的具体路由路径做重定向（比如仅当哈希路径为特定值时跳转），必须通过Angular客户端代码处理——因为服务器无法获取哈希片段内容。

示例实现：

1. 创建路由守卫

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class LanguageRedirectGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(): boolean {
    const currentPath = this.router.url;
    // 检测当前路由是否以/de/开头
    if (currentPath.startsWith('/de/')) {
      // 替换路径中的/de/为/en/并跳转
      const targetPath = currentPath.replace('/de/', '/en/');
      this.router.navigateByUrl(targetPath);
      return false;
    }
    return true;
  }
}

2. 在路由配置中应用守卫

const routes: Routes = [
  { 
    path: 'de', 
    canActivate: [LanguageRedirectGuard],
    children: [/* 原德语路由配置 */] 
  },
  { 
    path: 'en', 
    children: [/* 英语路由配置 */] 
  },
  // 其他路由配置
];

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