Angular 13部署IIS时深度链接出现HTTP 405错误求助

我来帮你拆解这个问题，你遇到的HTTP 405错误本质是IIS误把前端哈希路由的请求当成了后端资源请求，导致方法不允许的报错。咱们一步步来解决：

核心问题分析 #

虽然Angular的哈希路由（#后面的内容）本该由前端直接处理，不会发送到服务器，但IIS在直接访问带哈希的URL时，可能会把整个路径当成后端资源去解析，从而返回405（请求方法不允许）。而先访问根路径再手动改URL能正常工作，是因为此时浏览器已经加载了Angular的前端路由逻辑，会在本地处理哈希变化。

具体解决方案 #

1. 配置IIS URL重写规则（最关键） #

让IIS把所有不存在的文件/目录请求都转发到index.html，交给Angular处理路由。你可以通过IIS管理器操作，或者直接在站点根目录创建/修改web.config文件：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <!-- URL重写规则，确保所有前端路由请求转发到index.html -->
    <rewrite>
      <rules>
        <rule name="Angular Hash 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>
          <!-- 注意：这里的路径要和你的IIS虚拟目录一致，如果my-app是根站点，改成"/index.html" -->
          <action type="Rewrite" url="/my-app/index.html" />
        </rule>
      </rules>
    </rewrite>
    <!-- 配置静态资源的MIME类型，避免Angular的静态文件加载失败 -->
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
    </staticContent>
  </system.webServer>
</configuration>

2. 确认Angular的base href配置正确 #

部署时一定要保证Angular的基础路径和IIS的虚拟目录匹配：

• 构建时通过命令指定：ng build --prod --base-href="/my-app/"
• 或者手动修改dist/my-app/index.html里的<base href="/my-app/">标签

3. 检查IIS的HTTP请求方法限制 #

有时候IIS会对某些路径限制GET方法，你可以检查：

1. 打开IIS管理器，找到你的my-app站点
2. 点击“请求筛选”→切换到“HTTP方法”标签
3. 确保GET方法在允许列表中，如果不在，点击“添加”把GET加进去

4. 排查$http请求的潜在问题 #

虽然间接访问正常，但可以确认一下API请求的URL是否正确：

• 检查$http请求的路径是否因为base href或者路由路径导致错误，比如误把前端路由路径当成了API路径
• 确认后端API允许对应的请求方法（GET/POST等）

验证步骤 #

配置完成后，重启IIS站点，然后直接访问../my-app/#/myDefaultPage和../my-app/#/myAlternatePage，应该就能正常加载页面，不再出现405错误了。

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