Angular 17部署IIS含%2f编码字符时刷新404问题求解

你的问题根源是IIS默认会自动解码URL中的%2f为/，导致路由被拆分成子路径，服务器找不到对应物理文件。以下是无需改用查询参数的解决方案：

1. 禁止IIS解码URL中的%2f #

在web.config的<system.webServer>节点下添加requestFiltering配置，让IIS保留URL中的编码斜杠：

<system.webServer>
  <!-- 其他已有配置 -->
  <security>
    <requestFiltering allowDoubleEscaping="true" />
  </security>
</system.webServer>

allowDoubleEscaping="true"会让IIS不对%2f这类特殊编码进行自动解码，确保路由参数完整传递给Angular。

2. 优化URL重写规则 #

确保你的重写规则能匹配所有路由（包括含编码字符的），将所有非静态资源请求转发到index.html。修改后的重写规则示例：

<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="/myapp/index.html" />
    </rule>
  </rules>
</rewrite>

这里的match url=".*"会匹配所有路径，不管是否包含编码字符，确保所有非文件/目录的请求都转到Angular的入口文件。

3. 确认Angular路由与参数处理 #

• 确保你的Angular路由定义使用参数占位符，比如：

  const routes: Routes = [
    { path: 'b/:encodedParam', component: YourTargetComponent }
  ];
  

• 在组件中获取参数时，用decodeURIComponent解码参数值，因为此时encodedParam会包含原始的%2f：

  import { ActivatedRoute } from '@angular/router';
  
  constructor(private route: ActivatedRoute) {}
  
  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      const rawParam = params.get('encodedParam');
      const decodedParam = decodeURIComponent(rawParam || '');
      // 使用解码后的参数进行后续业务操作
    });
  }
  

注意事项 #

• 修改requestFiltering可能需要服务器管理员权限，若无法修改全局配置，可尝试在站点级的web.config中设置。
• 测试时需清空浏览器缓存，确保新的配置生效。

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