AngularJS单页应用IIS部署：如何让无效URL返回404状态码？

我帮你梳理下这个问题的解决方案，你现在遇到的情况在AngularJS单页应用部署到IIS时挺常见的：因为web.config里的重写规则把所有非文件/目录的请求都导向了根index.html，导致浏览器访问无效URL时，服务器先返回200状态码（重写成功），之后前端才跳转到错误页，但浏览器网络面板里显示的还是200，虽然prerender.io已经能正确返回404，但真实用户的浏览器状态不对，这对SEO和用户体验都有影响。

下面给你两种可行的解决思路，包括你提到的ASP.NET MVC路由方案：

方案一：直接在IIS重写规则里校验有效路由（轻量无额外依赖） #

这种方法不用引入MVC，直接修改web.config的重写规则，先判断请求URL是否属于你的Angular有效路由集合，无效的直接返回404：

1. 先整理好你的Angular应用所有有效路由，比如/home、/products、/products/:id这类，注意动态路由的正则匹配方式（比如数字ID可用[\d]+，任意字符用[^/]+）。
2. 修改web.config，添加两条规则：第一条拦截无效路由返回404，第二条只重写有效路由到根路径：

<!-- 第一条：拦截无效路由，直接返回404 -->
<rule name="AngularJS - Block Invalid Routes" stopProcessing="true">
  <match url=".*" />
  <conditions logicalGrouping="MatchAll">
    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
    <!-- 这里替换成你的有效路由正则，negate="true"表示不匹配这些路由就触发动作 -->
    <add input="{REQUEST_URI}" pattern="^/(home|products|products/[\d]+|about)$" negate="true" />
  </conditions>
  <action type="CustomResponse" statusCode="404" statusReason="Not Found" statusDescription="The requested resource does not exist." />
</rule>

<!-- 第二条：重写有效路由到根index.html -->
<rule name="AngularJS - Rewrite Valid 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="/" />
</rule>

方案二：用ASP.NET MVC路由系统维护URL（你提到的思路） #

如果你的项目已经引入ASP.NET MVC，或者愿意添加相关依赖，可以用MVC的路由系统来统一校验URL有效性：

1. 在RouteConfig.cs里注册有效路由和404 fallback路由：

public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        // 注册Angular有效路由，匹配成功就返回index.html
        routes.MapRoute(
            name: "AngularValidRoutes",
            url: "{*url}",
            defaults: new { controller = "SPA", action = "Index" },
            constraints: new { url = @"^(home|products|products/[\d]+|about)$" } // 替换成你的有效路由正则
        );

        // 所有不匹配的路由都导向404
        routes.MapRoute(
            name: "NotFound",
            url: "{*url}",
            defaults: new { controller = "Error", action = "NotFound" }
        );
    }
}

2. 创建SPAController，返回根index.html：

public class SPAController : Controller
{
    public ActionResult Index()
    {
        return File("~/index.html", "text/html");
    }
}

3. 创建ErrorController，返回404状态码：

public class ErrorController : Controller
{
    public ActionResult NotFound()
    {
        Response.StatusCode = 404;
        Response.TrySkipIisCustomErrors = true; // 防止IIS替换你的自定义404页面
        return View(); // 也可以直接返回Angular错误页的HTML，前端仍会处理跳转逻辑
    }
}

额外注意点 #

• 你的前端$urlRouterProvider.otherwise逻辑可以保留，这样即使服务器返回404，前端还是会跳转到自定义错误页，给用户友好提示。
• 测试时记得清除浏览器缓存，用curl/Postman直接请求无效URL，确认服务器返回404状态码。
• 因为你已经配置了prerender.io，服务器返回的404状态会被prerender正确抓取，不会影响SEO。

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