Angular 2调用API报HTTP Error 405.0，移除规则后页面刷新404求助

你遇到的是SPA应用常见的路由与API请求冲突问题——当前的rewrite规则把所有非文件、非目录的请求都导向了index.html，这包括你的API请求，导致服务器试图用静态页面的逻辑处理API的POST/PUT等谓词，自然抛出405错误；但如果移除规则，Angular的前端路由在刷新时又会因为服务器找不到对应物理文件而返回404。

解决方案：调整Rewrite规则，排除API请求路径 #

你需要修改web.config中的rewrite规则，让服务器识别出API请求并直接转发，而非重写到index.html。假设你的API路径前缀是/api（如果不是，替换成你实际的API前缀），修改后的完整配置如下：

<system.webServer>
  <rewrite>
    <rules>
      <!-- 优先处理API请求，匹配到后直接放行，不执行后续规则 -->
      <rule name="API Requests" stopProcessing="true">
        <match url="^api/(.*)" />
        <action type="None" />
      </rule>
      <!-- 保留原有的index.html放行规则 -->
      <rule name="Imported Rule 1" stopProcessing="true">
        <match url="^index\.html" ignoreCase="false" />
        <action type="None" />
      </rule>
      <!-- 处理Angular路由：非文件/非目录的请求重写到index.html -->
      <rule name="Imported Rule 2" stopProcessing="true">
        <match url="." ignoreCase="false" />
        <conditions>
          <add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="false" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
        </conditions>
        <action type="Rewrite" url="/index.html" />
      </rule>
    </rules>
  </rewrite>
  <!-- 保留你原有的其他配置 -->
  <httpProtocol>
    <customHeaders>
      <add name="Access-Control-Allow-Origin" value="*" />
      <add name="Access-Control-Allow-Headers" value="*" />
      <add name="Access-Control-Allow-Credentials" value="true" />
    </customHeaders>
  </httpProtocol>
  <validation validateIntegratedModeConfiguration="false" />
  <handlers>
    <remove name="OPTIONSVerbHandler" />
    <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
    <remove name="OPTIONSVerbHandler" />
    <remove name="TRACEVerbHandler" />
    <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
  </handlers>
  <modules>
    <remove name="ApplicationInsightsWebTracking" />
    <add name="ApplicationInsightsWebTracking" type="Microsoft.ApplicationInsights.Web.ApplicationInsightsHttpModule, Microsoft.AI.Web" preCondition="managedHandler" />
  </modules>
</system.webServer>

关键修改说明： #

• 新增的API Requests规则会优先匹配所有以/api/开头的请求，stopProcessing="true"确保匹配到后不再执行后续重写规则，让服务器直接处理API请求。
• 规则顺序很重要，必须让API请求的规则排在最前面，避免被后续的Angular路由规则覆盖。

如果你的API前缀不是/api，只需要修改<match url="^api/(.*)" />中的api为你实际的前缀即可（比如/service、/api/v1等）。

这样调整后，API请求会被服务器正常处理，同时Angular的前端路由在刷新时，服务器依然会返回index.html，由Angular自己处理路由跳转，完美解决两个问题的矛盾。

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