IIS部署前端项目刷新报错404

在Windows服务器上使用IIS部署React应用时,如果遇到刷新页面出现错误的情况,可以通过在项目根目录添加或修改web.config文件,使用URL重写规则来解决。具体做法是设置一个名为ReactRouter的规则,匹配所有GET请求和text/html类型的HTTP_ACCEPT,将无法找到的文件重定向到/index.html。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

react项目部署在windows服务器上时,使用IIS来部署,部署完成后打开响应ip+port没有报错,在相应页面点击刷新会出现这样的错误

 解决办法:在项目根目录的web.config文件中使用下面一段代码即可(如果没有web.config可以手动创建一个)

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="ReactRouter" patternSyntax="ECMAScript" stopProcessing="true">
          <match url=".*" />
          <conditions>
            <add input="{HTTP_METHOD}" pattern="^GET$" />
            <add input="{HTTP_ACCEPT}" pattern="^text/html" />
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

有的文章使用URL重写进行配置相关内容是一样的道理,使用URL重写配置之后也会自动生成相应的web.config

<think>好的,我现在要解决用户的问题:在IIS搭建网站时出现404错误,需要找到解决方案。根据用户提供的两个引用内容,我需要综合这些信息并结合自己的知识来给出有效的解决步骤。 首先,引用[1]提到了VUE部署IIS时出现404错误,解决方法包括安装URL重写工具并配置规则。具体步骤是安装IIS可承载的Web核心,下载URL重写工具,然后配置规则将请求重写到index.html。这适用于前端应用如Vue,因为路由可能使用HTML5模式,导致直接访问子路径时IIS找不到对应的文件,所以需要重写所有非文件请求到入口文件。 接着,引用[2]是关于.NET Core项目发布到IIS后出现404错误,原因是Swagger在Production环境下被禁用。解决方案是检查环境变量设置,确保Swagger在需要时可用,或者调整代码中的条件。这说明404错误也可能由应用程序自身的配置引起,比如环境变量控制的功能开关。 用户的问题是一般性的IIS网站配置404错误,需要综合考虑各种可能的原因。常见的404错误原因包括:错误的URL重写配置、应用程序池设置问题、缺失的模块或功能、文件或路径不存在、权限问题等。 首先,我需要确定404错误的具体情况。是所有的请求都返回404,还是特定路径?如果是前端SPA应用,可能需要URL重写;如果是后端应用如.NET Core,可能需要检查运行时模块或环境配置。此外,检查应用程序池是否使用正确的.NET版本或托管模式(如无托管代码对于ASP.NET Core)。 接下来,分步骤解决: 1. **检查基本配置**:确保网站物理路径正确,文件存在,特别是入口文件如index.html或web.config存在。权限方面,IIS_IUSRS和应用程序池身份应有读取权限。 2. **URL重写配置**:如引用[1]所述,安装URL重写工具,添加规则将非文件请求重写到入口文件。这对前端路由尤其重要,避免直接访问路由路径时返回404。 3. **应用程序池设置**:对于ASP.NET Core应用,确保应用程序池设置为“无托管代码”,并且已安装对应的ASP.NET Core托管捆绑包。否则,IIS无法正确转发请求到后端应用,导致404。 4. **环境变量和Swagger配置**:如引用[2]的情况,检查代码中是否在Production环境关闭了某些路由(如Swagger),导致访问这些路径时404。可以临时将环境设置为Development测试,或调整代码条件。 5. **启用静态内容功能**:IIS可能未安装静态内容功能,导致无法提供静态文件,返回404。需要在Windows功能中启用。 6. **日志分析**:启用IIS的失败请求跟踪,查看具体404错误的模块和原因,比如是静态文件模块还是ASP.NET Core模块处理的请求。 最后,需要验证每个步骤是否解决了问题,比如测试静态文件访问、带路由的URL访问,以及后端API的响应情况。根据不同的应用类型,解决方案可能侧重不同的方面,比如前端侧重URL重写,后端侧重模块安装和环境配置。</think>在IIS中配置网站时出现404错误,需根据具体场景采取以下解决方案: ### 一、基础检查与配置 1. **确认物理路径与文件权限** - 检查网站物理路径是否正确,入口文件(如$index.html$、$web.config$)是否存在。 - 为文件夹赋予$IIS_IUSRS$用户组**读取**权限[^1]。 2. **启用静态内容功能** - 在服务器管理器中,通过 **添加角色和功能** 安装 **静态内容** 组件,避免静态资源返回404。 --- ### 二、前端应用(如Vue/React)404问题 1. **配置URL重写规则** - 安装 [URL Rewrite 工具](https://www.iis.net/downloads/microsoft/url-rewrite),在IIS管理器中添加规则: ```xml <rule name="Rewrite to Index" stopProcessing="true"> <match url=".*" /> <conditions> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> </conditions> <action type="Rewrite" url="/index.html" /> </rule> ``` - 此规则将所有非文件请求重写到入口文件$index.html$,解决前端路由失效问题[^1]。 --- ### 三、后端应用(如ASP.NET Core)404问题 1. **验证应用程序池配置** - 应用程序池需设置为 **无托管代码**,并确保服务器已安装 [ASP.NET Core 托管捆绑包](https://dotnet.microsoft.com/download/dotnet-core)。 2. **检查环境变量与中间件** - 若使用Swagger,确认代码未在Production环境下禁用相关路由: ```csharp if (app.Environment.IsDevelopment()) { app.UseSwagger(); app.UseSwaggerUI(); } ``` - 可暂时将环境变量$ASPNETCORE_ENVIRONMENT$设为$Development$测试[^2]。 --- ### 四、高级排查 1. **启用失败请求跟踪** - 在IIS中启用 **失败请求跟踪**,分析404错误的具体模块(如静态文件模块或ASP.NET Core模块)。 2. **验证模块加载** - 检查$web.config$中是否加载了$AspNetCoreModuleV2$: ```xml <system.webServer> <handlers> <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" /> </handlers> </system.webServer> ``` --- ### 五、示例验证 1. **静态文件测试** 访问$http://域名/robots.txt$,若返回404则说明静态内容未启用或路径错误。 2. **动态请求测试** 访问后端API接口(如$http://域名/api/values$),若404需检查应用程序池和模块配置。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值