Question

我遇到了关于CSS和图像文件链接断开的奇怪问题。

在我们的网站上，一切都按预期工作。如果您输入的是不存在的网址路径，例如http://example.com/test，则会找不到404找不到的网址。

但是，如果您输入不同的路径http://example.com/another/test.html，404页面也会出现，但CSS和图片的链接会被破坏。

此外，该网址偶尔会解析为http://example.com/example.com/kontakt，其中包含实际的域example.com。

也许有人对此问题有解释/解决方案....

Answer 1

这是因为您正在使用资源的相对路径（CSS，JS和图像文件）。您需要使用root-relative（以斜杠开头）或绝对URL。

或者，使用base部分中的head元素告诉浏览器相对URL的相对位置。例如：

<base href="http://example.com/">

（但是，请注意，如果你有页面内的锚点，例如。base或者需要支持IE6，那么在使用href="#top"标记时会有一些注意事项吗？！）

但是，如果您输入不同的路径http://example.com/another/test.html，404页面也会出现，但是css和图片的链接会被破坏。

例如，当您希望该地址相对于文档根目录时，此地址页面中的css/normalize.css之类的网址将解析为http://example.com/another/css/normalize.css。

此外，该网址偶尔会解析为http://example.com/example.com/kontakt，其中包含实际的域example.com。

这听起来好像你错过了某些链接中的方案，例如：

<a href="example.com/kontakt">Link Text</a>

它应该是：

<a href="http://example.com/kontakt">Link Text</a>

或者，协议相对：

<a href="//example.com/kontakt">Link Text</a>

另请参阅我在Pro网站管理员堆栈上对此问题的回答： https://webmasters.stackexchange.com/questions/86450/htaccess-rewrite-url-leads-to-missing-css

Answer 2

在我的情况下，我的location文件中已经存在conf个块，用于链接断开的文件，这些块的配置不正确。

这就是我在default.conf中得到的结果。对于所有以“ /sad.svg”结尾的URI，它将在指定目录中提供文件，而忽略URI前面的任何路径。

...
  error_page 404 /404.html;
  location = /404.html {
          root /var/www/errors;
          internal;
  }

  location ~* ".*/sad.svg"  {
      alias /var/www/errors/sad.svg;
      access_log off;
  }
  location ~* ".*/twitter.svg" {
      alias /var/www/errors/twitter.svg;
      access_log off;
  }
  location ~* ".*/gitlab.svg" {
      alias /var/www/errors/gitlab.svg;
      access_log off;
  }
...

404找不到 - 断开链接到CSS，图像

2 个答案: