.htaccess 文件 URL 重写规则后的 JS 和 CSS 呈现问题
JS and CSS Rendering Issues After .htaccess File URL Rewrite Rule
我在我的电脑上使用 WAMP 服务器作为本地主机。我想在没有 PHP 扩展名的情况下重写我的 URL 并删除从 http://myproject/post.php?page=page_slug 到 http://myproject/post/page_slug 的查询字符串（但可读），我应该能够阅读“page_slug”通过“post.php”页面上的 echo $_GET['page'];。为此，我在下面分享了一个具有简单层次结构的项目。
Project_Folder:
- ->css/style.css
- ->image/logo.jpg
- ->js/script.js
- ->.htaccess
- ->index.php
- ->about.php
- ->contact.php
- ->blog.php
- ->post.php
- ->page.php
现在我想从我的 URL 中删除所有 .PHP 扩展名，所以我使用了下面的 .htaccess 代码并且它工作正常。
# Options is required by Many Hosting
Options +MultiViews
#Remove .PHP Extension And Force Redirect To Without .PHP File Name In URL
RewriteEngine On
RewriteBase /
RewriteCond %{THE_REQUEST} ^[A-Z]{3,}\s([^.]+)\.php [NC]
RewriteRule ^ %1 [R=301,L]
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}.php -f
RewriteRule ^(.*?)/?$ .php [NC,L]
#RewriteCond %{THE_REQUEST} \s([^?]*)\?p=(\S+)\s [NC]
#RewriteRule ^ %1/%2? [R=301,L]
在上面的代码之后，我可以将我的 URLs 从 http://myproject/post.php?page=page_slug 重写为 http://myproject/post?page=page_slug 意味着。PHP 扩展现在已成功删除。
现在为了使我的 URL 摆脱查询字符串模式，我在 .htaccess 文件中的上述代码之后使用了以下代码。
RewriteCond %{THE_REQUEST} \s([^?]*)\?p=(\S+)\s [NC]
RewriteRule ^ %1/%2? [R=301,L]
在上面的代码之后，我可以将我的 URLs 从 http://myproject/post?page=page_slug 重写为 http://myproject/post/page_slug 意味着查询字符串现在已成功删除，但我的 JS 和 CSS 现在坏了，如下所示。
但是我的每个文件都是完美的，因为当我删除上面的第二个代码集时，它就可以正常工作了。此外，它们加载正常，如下所示。
我注意到一件事，我的 CSS 和 JS 文件数据现在随着我的 PHP 文件数据而改变，如下所示。为什么会这样……？？？
那么这个问题的解决方法是什么...？？？另外，请记住我还需要在我的文件中读取 QUERY STRING 参数。
“问题”是您似乎在使用静态资源（CSS、JS 和图像）的相对 URL-paths。所以这是一个 client-side URL 分辨率问题。您应该对您的资产使用 root-relative（以斜杠开头）或绝对（使用方案 + 主机名）URLs，以便无论 URL-path 深度如何都可以定位它们。 （请注意，您的 JS 发出的任何请求，例如 AJAX，也应该是 root-relative 或绝对值。）
问题不在于 .htaccess，而是当您将 URL 从 /post.php?page=page_slug 更改为 /post/page_slug 时，任何 client-side 相对 URL 将相对于 /post/ 进行解析，而不是像以前那样 /（文档根目录）。
对 JS（和 CSS）文件的请求导致 404，因此 404 HTML 错误文档很可能被解析为 JS 并失败（即。“未捕获的语法错误：意外标记：'<'" - 由于 <!DOCTYPE html> 或打开 <html> 标签）。
一种可能的 解决方法（避免更改您的 URLs）是在 [=18] 中使用 base HTML 元素=] 部分指示任何相对 URL 应该相对于什么来解析，覆盖当前文档的 URL。但是，如果您使用 href="#element" 形式的 in-page 锚点，这会有一些额外的警告 - 因为它们现在将相对于 base 元素中声明的文档而不是当前文档进行解析.
另请参阅 my answer 网站管理员堆栈中的以下问题，该问题对此有更详细的介绍：
我在我的电脑上使用 WAMP 服务器作为本地主机。我想在没有 PHP 扩展名的情况下重写我的 URL 并删除从 http://myproject/post.php?page=page_slug 到 http://myproject/post/page_slug 的查询字符串（但可读），我应该能够阅读“page_slug”通过“post.php”页面上的 echo $_GET['page'];。为此，我在下面分享了一个具有简单层次结构的项目。
Project_Folder:
- ->css/style.css
- ->image/logo.jpg
- ->js/script.js
- ->.htaccess
- ->index.php
- ->about.php
- ->contact.php
- ->blog.php
- ->post.php
- ->page.php
现在我想从我的 URL 中删除所有 .PHP 扩展名，所以我使用了下面的 .htaccess 代码并且它工作正常。
# Options is required by Many Hosting
Options +MultiViews
#Remove .PHP Extension And Force Redirect To Without .PHP File Name In URL
RewriteEngine On
RewriteBase /
RewriteCond %{THE_REQUEST} ^[A-Z]{3,}\s([^.]+)\.php [NC]
RewriteRule ^ %1 [R=301,L]
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}.php -f
RewriteRule ^(.*?)/?$ .php [NC,L]
#RewriteCond %{THE_REQUEST} \s([^?]*)\?p=(\S+)\s [NC]
#RewriteRule ^ %1/%2? [R=301,L]
在上面的代码之后，我可以将我的 URLs 从 http://myproject/post.php?page=page_slug 重写为 http://myproject/post?page=page_slug 意味着。PHP 扩展现在已成功删除。
现在为了使我的 URL 摆脱查询字符串模式，我在 .htaccess 文件中的上述代码之后使用了以下代码。
RewriteCond %{THE_REQUEST} \s([^?]*)\?p=(\S+)\s [NC]
RewriteRule ^ %1/%2? [R=301,L]
在上面的代码之后，我可以将我的 URLs 从 http://myproject/post?page=page_slug 重写为 http://myproject/post/page_slug 意味着查询字符串现在已成功删除，但我的 JS 和 CSS 现在坏了，如下所示。
但是我的每个文件都是完美的，因为当我删除上面的第二个代码集时，它就可以正常工作了。此外，它们加载正常，如下所示。
我注意到一件事，我的 CSS 和 JS 文件数据现在随着我的 PHP 文件数据而改变，如下所示。为什么会这样……？？？
那么这个问题的解决方法是什么...？？？另外，请记住我还需要在我的文件中读取 QUERY STRING 参数。
“问题”是您似乎在使用静态资源（CSS、JS 和图像）的相对 URL-paths。所以这是一个 client-side URL 分辨率问题。您应该对您的资产使用 root-relative（以斜杠开头）或绝对（使用方案 + 主机名）URLs，以便无论 URL-path 深度如何都可以定位它们。 （请注意，您的 JS 发出的任何请求，例如 AJAX，也应该是 root-relative 或绝对值。）
问题不在于 .htaccess，而是当您将 URL 从 /post.php?page=page_slug 更改为 /post/page_slug 时，任何 client-side 相对 URL 将相对于 /post/ 进行解析，而不是像以前那样 /（文档根目录）。
对 JS（和 CSS）文件的请求导致 404，因此 404 HTML 错误文档很可能被解析为 JS 并失败（即。“未捕获的语法错误：意外标记：'<'" - 由于 <!DOCTYPE html> 或打开 <html> 标签）。
一种可能的 解决方法（避免更改您的 URLs）是在 [=18] 中使用 base HTML 元素=] 部分指示任何相对 URL 应该相对于什么来解析，覆盖当前文档的 URL。但是，如果您使用 href="#element" 形式的 in-page 锚点，这会有一些额外的警告 - 因为它们现在将相对于 base 元素中声明的文档而不是当前文档进行解析.
另请参阅 my answer 网站管理员堆栈中的以下问题，该问题对此有更详细的介绍：