在IIS 7部署React+MVC C# WebApi项目，解决路由跳转问题

嘿，我刚好处理过一模一样的场景——用create-react-app做的React前端搭配WebApi 2后端，部署到IIS7的时候踩过不少路由的坑，给你一步步说清楚怎么搞定：

核心思路就是让IIS能精准区分：以/api开头的请求转发给后端控制器，其他所有请求都交给React的index.html，由React Router处理前端路由。

第一步：准备好部署文件 #

• 先在React项目根目录跑 npm run build，生成生产环境的静态文件（都在build文件夹里）；
• 把build里的所有文件，和你的WebApi项目发布后的文件放在同一个IIS站点目录下（或者直接把React的build内容部署到站点根目录，WebApi的/api路由自然对应后端的控制器）。

第二步：安装IIS URL重写模块 #

IIS 7默认不带URL重写工具，你得先装URL Rewrite 2.0——直接打开IIS管理器，找到“Web平台安装程序”，搜这个组件就能安装，是微软官方的，放心用。

第三步：配置web.config（最关键的一步！） #

在你的IIS站点根目录下创建或修改web.config文件，添加重写规则。下面是我实测能用的完整配置，直接抄就行：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <!-- 确保React的静态资源（比如json、字体文件）能被IIS正确识别 -->
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
      <!-- 要是还有其他静态资源类型加载失败，就在这里加对应的MIME映射 -->
    </staticContent>

    <!-- 配置URL重写规则 -->
    <rewrite>
      <rules>
        <!-- 规则1：所有/api开头的请求，直接放行给WebApi处理，不做重写 -->
        <rule name="Api Routes" stopProcessing="true">
          <match url="^api/(.*)" />
          <action type="None" />
        </rule>

        <!-- 规则2：静态资源文件（js、css、图片、字体这些）直接返回，不重写 -->
        <rule name="Static Files" stopProcessing="true">
          <match url="([\S]+[.](html|css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot))" />
          <action type="None" />
        </rule>

        <!-- 规则3：剩下的所有请求（前端路由），都重写到index.html，交给React Router处理 -->
        <rule name="React Router 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="/index.html" />
        </rule>
      </rules>
    </rewrite>

    <!-- 配置WebApi需要的无扩展名请求处理 -->
    <handlers>
      <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>
  </system.webServer>
</configuration>

第四步：验证配置 #

重启你的IIS站点，然后测试几个关键点：

• 访问/api/你的接口路径，应该能正常返回WebApi的接口数据；
• 访问React的前端路由（比如/dashboard），应该能加载index.html并由React Router正确渲染页面；
• 刷新前端路由页面，或者直接在地址栏输入前端路由地址，不会出现404错误。

额外提醒 #

• 确保你的WebApi控制器都配置了正确的路由前缀，比如给控制器加[RoutePrefix("api")]，或者在路由属性里写[Route("api/xxx")]；
• 要是你在React的package.json里设置了homepage字段（比如部署到子目录），那web.config里重写的url要改成对应路径，比如homepage是/my-app，那重写地址就是/my-app/index.html；
• 要是碰到静态资源加载403的问题，检查IIS站点的权限，给IIS_IUSRS用户加上读取静态文件的权限就行。

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