本文旨在解决在iis中使用url重写规则后，静态资源（如css、图片）无法正确加载的问题。核心问题在于重写规则可能无差别地重定向所有请求，包括对静态文件的请求，导致浏览器无法找到正确的资源路径。教程将指导您如何通过调整html中的资源路径或优化`web.config`中的重写规则来确保静态文件正常加载，并强调使用浏览器开发者工具进行诊断的重要性。
在IIS环境中部署Web应用时，URL重写（URL Rewrite）是一个非常强大的功能，它允许我们灵活地管理URL结构，实现友好的URL、强制HTTPS、处理重定向等。然而，不当的重写规则有时会意外地影响到页面中静态资源的加载，导致样式丢失、图片不显示等问题。
问题描述
当在web.config文件中添加URL重写规则，特别是将所有请求重定向到根目录或特定路径时，可能会出现静态资源（如CSS文件、图片）无法加载的情况。例如，以下规则旨在将所有非根路径的请求重定向到网站根目录：
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Rewrite to root" stopProcessing="true">
<match url="." />
<action type="Redirect" url="https://{HTTP_HOST}" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>此规则的意图是将web.test.com/something重定向到web.test.com。然而，一旦应用此规则，页面可能会显示为无样式的纯文本，背景图片也无法加载。即使尝试在web.config中为images和css目录添加匿名访问权限，问题依然存在。
诊断问题：利用浏览器开发者工具
遇到静态资源加载问题时，首要且最有效的诊断方法是使用浏览器的开发者工具（通常通过按F12键打开）。
- 打开开发者工具： 在问题页面上按F12。
- 切换到“网络”（Network）选项卡： 刷新页面。
- 观察请求状态码： 检查所有发出的请求。您会发现对css/style.css、images/bg.jpg等静态资源的请求返回了404 Not Found或302 Found后紧接着404的错误。
- 检查重定向链： 对于返回302的请求，查看其重定向目标。这通常会揭示URL重写规则是如何影响这些资源的。
通过网络请求的分析，可以明确问题出在静态资源的路径解析或被重写规则错误地处理。
解决方案
解决这类问题通常有两种主要策略：调整静态资源的引用路径，或者修改URL重写规则以排除静态文件。
方案一：调整HTML中静态资源的引用路径
当重写规则将所有请求重定向到根目录时，如果HTML文件中的静态资源使用相对路径（例如css/style.css），浏览器会尝试从新的根目录解析这些路径。这可能导致路径不正确。
问题分析： 假设您的页面被重定向到https://web.test.com/。 如果您的HTML中引用CSS是这样：
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
浏览器会尝试请求https://web.test.com/css/style.css。如果您的web.config位于网站根目录，并且CSS文件也位于根目录下的css文件夹中，理论上这个路径是正确的。但如果重写规则在处理css/style.css这个请求时也将其重定向了，或者重定向后的页面上下文改变了，就会出问题。
解决方法： 将静态资源的路径改为根相对路径或绝对路径。
-
根相对路径： 在路径前加上/，表示从网站的根目录开始查找。
<link href="/css/style.css" rel="stylesheet" type="text/css" media="all" /> <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
对于CSS文件内部的图片引用，也需要确保路径正确。例如，background: url(../images/bg.jpg)在CSS文件位于/css/style.css时，会正确解析为/images/bg.jpg。如果CSS文件本身被重定向，或者浏览器对../的解析与预期不同，也可能出现问题。通常情况下，CSS内部的相对路径是相对于CSS文件本身的。
绝对路径（不推荐，但可作为测试）： 使用完整的URL，例如https://web.test.com/css/style.css。这种方法在开发和部署时灵活性较差。
示例 index.html 修改：
<html>
<head>
<title>Site for upgrade</title>
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon"> <!-- 修改为根相对路径 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Custom Theme files -->
<link href="/css/style.css" rel="stylesheet" type="text/css" media="all" /> <!-- 修改为根相对路径 -->
<!-- //Custom Theme files -->
</head>
<body>
<!-- main -->
<div class="main">
<h1>Site for upgrade..</h1>
<div class="main-row">
<p>We apologize for any inconvenience. Work on the update is underway. The site will be available soon.</p>
</div>
</div>
<!-- //main -->
</body>
</html>方案二：修改URL重写规则，排除静态文件
更健壮的解决方案是修改web.config中的重写规则，使其忽略对静态文件或静态文件目录的请求。这可以通过在重写规则中添加条件（<conditions>）来实现。
解决方法： 在重写规则中添加条件，检查请求的URL是否指向一个实际存在的文件或目录，或者是否是特定的静态文件扩展名。
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Rewrite to root" stopProcessing="true">
<match url="." />
<conditions>
<!-- 排除对实际文件和目录的请求 -->
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<!-- 也可以显式排除常见的静态文件扩展名 -->
<!-- <add input="{REQUEST_URI}" pattern="\.(css|js|jpg|jpeg|png|gif|ico)$" negate="true" /> -->
</conditions>
<action type="Redirect" url="https://{HTTP_HOST}" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>解释：
- <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />：这条条件表示如果请求的URL对应一个实际存在的文件，则不执行此重写规则。
- <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />：这条条件表示如果请求的URL对应一个实际存在的目录，则不执行此重写规则。
通过添加这些条件，URL重写模块会先检查请求的URL是否指向一个真实的文件或目录。如果是，则跳过此重写规则，允许IIS直接处理该静态资源的请求。这样可以确保静态文件不会被重定向。
方案三：临时验证（不推荐作为最终方案）
在紧急情况下，或者为了快速验证问题是否确实与路径相关，可以尝试将所有静态文件（CSS、JS、图片等）复制到重定向目标路径的根目录。如果复制后页面样式恢复，则可以确认问题出在路径或重写规则对静态文件的处理上。但这仅作为临时验证手段，不应作为长期的解决方案。
注意事项与最佳实践
- 始终使用F12开发者工具： 这是诊断Web应用问题的最重要工具。通过“网络”选项卡，您可以清晰地看到每个请求的状态、响应头和重定向链。
-
理解路径类型：
- 相对路径： css/style.css，相对于当前HTML文件的位置。
- 根相对路径： /css/style.css，相对于网站的根目录。
- 绝对路径： https://example.com/css/style.css，包含完整的协议、域名和路径。 在重写规则复杂的场景下，根相对路径通常是最稳妥的选择。
- 重写规则的顺序： 在web.config中，规则的顺序很重要。IIS会按照它们在文件中出现的顺序进行处理。stopProcessing="true"属性会阻止后续规则的执行，但前提是当前规则匹配并执行了动作。
- 测试所有场景： 在修改web.config或HTML后，务必在不同浏览器和不同访问路径下进行全面测试，确保所有功能正常。
总结
当IIS URL重写规则导致静态资源加载失败时，核心原因往往是重写规则无差别地处理了所有请求，包括对静态文件的请求。通过使用浏览器开发者工具进行精确诊断，我们可以确定是路径问题还是重写规则配置不当。解决方案包括将HTML中的静态资源路径调整为根相对路径，或者更推荐的做法是修改web.config中的重写规则，添加条件以排除对实际文件和目录的重定向，从而确保静态资源能够被IIS正确地直接服务。遵循这些最佳实践，可以有效避免和解决这类常见问题。
