本文旨在解决在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键打开）。
通过网络请求的分析，可以明确问题出在静态资源的路径解析或被重写规则错误地处理。
解决这类问题通常有两种主要策略：调整静态资源的引用路径，或者修改URL重写规则以排除静态文件。
当重写规则将所有请求重定向到根目录时，如果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>更健壮的解决方案是修改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>解释：
通过添加这些条件，URL重写模块会先检查请求的URL是否指向一个真实的文件或目录。如果是，则跳过此重写规则，允许IIS直接处理该静态资源的请求。这样可以确保静态文件不会被重定向。
在紧急情况下，或者为了快速验证问题是否确实与路径相关，可以尝试将所有静态文件（CSS、JS、图片等）复制到重定向目标路径的根目录。如果复制后页面样式恢复，则可以确认问题出在路径或重写规则对静态文件的处理上。但这仅作为临时验证手段，不应作为长期的解决方案。
当IIS URL重写规则导致静态资源加载失败时，核心原因往往是重写规则无差别地处理了所有请求，包括对静态文件的请求。通过使用浏览器开发者工具进行精确诊断，我们可以确定是路径问题还是重写规则配置不当。解决方案包括将HTML中的静态资源路径调整为根相对路径，或者更推荐的做法是修改web.config中的重写规则，添加条件以排除对实际文件和目录的重定向，从而确保静态资源能够被IIS正确地直接服务。遵循这些最佳实践，可以有效避免和解决这类常见问题。
以上就是IIS URL 重写规则导致静态资源加载失败的解决方案的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
942
收藏
