404 не найдено - битые ссылки на CSS, изображения

У меня возникла странная проблема, связанная с неработающими ссылками на файлы CSS и изображения.

На нашем сайте все работает как положено. Если вы введете несуществующий URL-адрес, такой как http://example.com/test, 404 не найдено, как и должно быть.

Однако, если вы введете другой путь http://example.com/another/test.html, страница 404 также появится, но ссылки на CSS и изображения не работают.

Кроме того, иногда URL-адрес преобразуется в http://example.com/example.com/kontakt, где находится фактический домен example.com.

Может быть у кого-то есть объяснение/решение этой проблемы....


person Alex    schedule 02.05.2017    source источник


Ответы (2)


Это связано с тем, что вы используете относительные пути к своим ресурсам (CSS, JS и файлам изображений). Вам нужно использовать либо относительные корневые (начинающиеся с косой черты), либо абсолютные URL-адреса.

В качестве альтернативы используйте элемент base в разделе head, который сообщает браузеру, к чему относятся относительные URL-адреса. Например:

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

(Обратите внимание, однако, что есть предостережения при использовании тега base, если у вас есть якоря на странице, например, href="#top", или вам нужна поддержка IE6?!)

Однако, если вы введете другой путь http://example.com/another/test.html, страница 404 также появится, но ссылки на css и изображения не работают.

Например, URL-адрес типа css/normalize.css на странице по этому адресу будет преобразован в http://example.com/another/css/normalize.css, когда вы ожидаете, что он будет относиться к корню документа.

Кроме того, URL-адрес иногда разрешается в 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>

См. также мой ответ на этот вопрос в стеке профессиональных веб-мастеров: https://webmasters.stackexchange.com/questions/86450/htaccess-rewrite-url-leads-to-missing-css

person MrWhite    schedule 02.05.2017
comment
Работал очень хорошо. Благодарю вас! - person Alex; 02.05.2017

В моем случае в моем файле conf уже было location блоков для файлов с неработающими ссылками, просто блоки не были настроены должным образом.

Вот что у меня получилось в моем default.conf. Для всех URI, оканчивающихся на «/sad.svg», он обслуживает файл в указанном каталоге, игнорируя любой путь ранее в 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;
  }
...
person Cameron Hudson    schedule 15.06.2019