404 未找到 - CSS、图片的链接损坏

Question

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

在我们的网站上，一切都按预期进行。如果您输入一个不存在的 URL 路径，例如 http://example.com/test，则 404 not found 会按原样出现。

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

此外，URL 有时会解析为 http://example.com/example.com/kontakt，其中包含实际域 example.com。

也许有人对这个问题有 explanation/solution....

Answer 1

这是因为您使用的是资源的相对路径（CSS、JS 和图像文件）。您需要使用相对根目录（以斜杠开头）或绝对目录 URLs.

或者，在 head 部分使用 base 元素告诉浏览器 URL 相对于什么。例如：

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

（但是请注意，如果您有页内锚点，例如 href="#top" 或需要支持 IE6？在使用 base 标签时有一些注意事项？！）

However, if you type in a different path http://example.com/another/test.html the 404 page comes up as well but the links to the css and images are broken.

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

In addition, the URL occasionally resolves to http://example.com/example.com/kontakt having the actual domain example.com in there.

这听起来好像您的某些链接中缺少方案，例如：

<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 Webmasters 堆栈上对这个问题的回答： https://webmasters.stackexchange.com/questions/86450/htaccess-rewrite-url-leads-to-missing-css

Answer 2

在我的例子中，我的 conf 文件中已经有 location 块用于链接断开的文件，这些块没有正确配置。

这是我在 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、图片的链接损坏

404 not found - broken links to CSS, images

.htaccess

http-status-code-404

broken-links

broken-image