IIS部署Vue应用刷新路由报403错误求助

核心原因 #

Vue是单页应用（SPA），前端路由（比如/about、/user）靠Vue Router在浏览器端处理。刷新页面时，浏览器会直接向IIS请求对应路径的物理文件，但服务器上根本没有这些文件，再加上权限配置问题，就会触发403错误。

排查与解决步骤 #

• 检查Web.config的URL重写规则
  这是解决SPA刷新问题的核心，必须配置IIS把所有路由请求转发到index.html。没配置或配置错了，就会出现资源找不到的情况，进而触发403。
  可用的Web.config示例：

  <?xml version="1.0" encoding="UTF-8"?>
  <configuration>
    <system.webServer>
      <rewrite>
        <rules>
          <rule name="Handle History Mode" 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>
      <staticContent>
        <mimeMap fileExtension=".json" mimeType="application/json" />
        <mimeMap fileExtension=".vue" mimeType="text/plain" />
      </staticContent>
    </system.webServer>
  </configuration>
  

  同时要确认IIS已经安装了URL重写模块，没装的话去服务器管理器里添加这个组件。

• 核查IIS站点的权限配置
  403本质是权限拒绝，要确认两点：

  • 站点应用池的身份（比如ApplicationPoolIdentity）对Vue项目的物理目录有读取和执行权限。
  • 物理目录的NTFS权限里，给应用池身份或IIS_IUSRS组分配了至少读取的权限。

• 确认Vue项目的构建配置
  本地正常不代表构建后的文件没问题：

  • 构建时publicPath要设对，根目录部署就设为/，子路径部署就设为对应路径（比如/vue-app/）。
  • 检查dist目录是否完整，所有js、css、图片等静态资源都正确生成，路径引用没出错。

• 检查IIS的目录浏览设置
  如果IIS开了目录浏览，请求不存在的文件时会尝试返回目录列表，要是目录没浏览权限就会出403。建议关掉目录浏览，确保所有请求都通过重写规则指向index.html。

• 分析控制台的具体错误
  看控制台里的403请求是针对路由路径，还是某个静态资源？如果是静态资源403，就查该资源的权限或路径；如果是路由路径403，还是回到重写规则和权限的排查。

内容的提问来源于stack exchange，提问作者Andrés O ́Farrill