Failed to load resource the server responded with a status of 404 как исправить

The error code that states failed to load resource: the server responded with a status of 404 () occurs when your website fails to load a resource. Multiple factors cause this error, which makes it a hard one to fix. Keep on reading as we demystify these causes and how you can fix them.

By the end of this article, you’ll be in a better position to fix and prevent this error in your projects.

Why Server Fail to Load a Resource Causing a Status of 404 Happens?

The following are the reasons why your server failed to load a resource causing a status of 404:

• Invalid Relative Paths
• Invalid URL
• Typographical error in a folder name
• Non-existent file name
• Misuse of the forward-slash character
• A Missing Resource

– Invalid Relative Paths

An invalid relative path for a resource in your website or application causes an error. If the resource is an image, you’ll observe the failed to load resource: the server responded with a status of 404 image error. For example, your website can have an image in FolderX, and FolderX is in FolderY. In your website code, the following <img> element will cause an error:

<img src=”./FolderX/image.jpg” alt=”Describe your image” />

When looking at the code above, you can see that we have made an outright error. That’s because the image folder itself, FolderX, is in FolderY. However, in our code, there is no reference to FolderY when trying to retrieve the image. This is analogous to dialing an invalid phone number.

– Invalid URL

An invalid URL causes the failed to load resource: the server responded with a status of 404 () react error. An example, where you can have an invalid URL goes as such:

• You build your React project locally on your system.
• Use a web publishing tool like Surge to test the website.
• You tested the URL only to see a blank page.
• You check the console, and there are lots of error messages. Most of the error messages are references to a failed resource.

Another example is when you attempt to load a file from a CDN and you forgot to include the directory that contains the file in the CDN URL. As a result, you get an error because the server tried to locate your specified directory, but it could not.

On WordPress, an invalid URL can lead to failed to load resource: the server responded with a status of 404 WordPress error. The main cause of this WordPress error is when you have an error in your WordPress URL settings. Be aware that an outdated Theme or Plugin can cause the error as well.

– Typographical Error in a Folder Name

When you have a typo in a folder name, a request for such folder sends the server on an “error journey”. For example, if you have a server folder called FlderA, afterward, you made a request for FolderA. When you observe the folder’s name on the server, we have a typo. That’s why the below code will lead to an error:

<link rel=”stylesheet” href=”FolderA/styles.css” />

From the code above, we have tried to retrieve the styles.css file from FolderA but on the server, the folder’s name is FlderA. Therefore, you’ll get an error when the server tries to fetch the styles.css file. That’s because FolderA has the wrong spelling on the server.

– Non-existent File Name

A non-existent file name causes the failed to load resource: the server responded with a status of 404 spring boot error. A typical example is when you load a different jQuery version into your code but try to use a different jQuery version. If you are running a typical HTML+CSS+JavaScript stack, there is a high chance you’ll get the error.

That’s because it’s easy to make mistakes in file names when using HTML+CSS+JavaScript. For example, you’ll get an error if you save a CSS file as style.css and your code requested for styles.css. Note, in the latter, we have an S before the file extension, while in the former, there is no S. before the file extension. Subtle mistakes like this can lead to hours of debugging.

– Misuse of the Forward-Slash Character

Misuse of the forward-slash (/) can cause an error when you deploy your website to GitHub pages. As a result, you’ll notice the failed to load resource: the server responded with a status of 404 () GitHub error. Let’s assume you’ve deployed your website, and there is a barrage of errors in the console. The first place to check is your < link/> element that points to a CSS file.

This means if your < link/> tag reads something like the following:

< link rel=”stylesheet” href=”/css/main.css”>

This will point to the following URL:

https://<your_github_username>.github.io/css/main.css

The URL will throw an error because the GitHub repo for your website should follow <your_github_username>. However, due to the forward-slash at the beginning of the href value, this is not the case. As a result, your web browser produces the wrong URL leading to the error.

In Express in Node.js, you could use a forward-slash when specifying the location of static files. However, you could ignore the forward-slash in the source of the < script> tag. As a result, you’ll get the failed to load resource the server responded with a status of 404 (not found) node js error. Besides, lookout for failed to load resource the server responded with a status of 404 (not found) web api error.

– A Missing Resource

If you try to retrieve a missing resource on your web server, you’ll get the “failed to load” resource error. That’s because it’s missing and there is no way for the server to get it. Now that you know the reason for the “failed to load” resource error, you’ll ask the following question:

How do I fix failed to load the resource: the server responded with a status 404?

How To Fix Failed to Load Resource Warning?

You can fix the resource error by taking precautions that prevent a load resource error.  Among these precautions is to use the right relative path and avoid an invalid URL. That’s not all, also, ensure the correct usage of the forward-slash character and double-check your folder names and ensure a resource exists on the web server.

– Use the Right Relative Path

The correct usage of a relative path goes a long way in preventing the failed to load resource error. To explain this better, we’ll revisit an earlier example in this article. In the example, we talked about your website having an image in FolderX. At the same time, FolderX is in FolderY, so you write the following code to get the image:

<img src=”./FolderX/image.jpg” alt=”Describe your image” />

The previous code results in an error because there is no reference to FolderY. Therefore, the following is the correct code that prevents the error:

<img src=”./FolderY/FolderX/image.jpg” alt=”Describe your image” />

The code above assumes that the HTML that retrieves the image is in the root directory.

– Use the Correct URL

You should use the correct URL if you’d like to prevent the failed to load resource error. If you are working with React, check your website’s URL to ensure the URL has the form of “https://<your_domain>/static/css” (without quotes). If you are on WordPress, do the following to prevent a failed to load resource error:

• Navigate to Settings — General.
• Look for WordPress Address (URL) and Site Address (URL).
• Ensure both URLs are correct
• Ensure both URLs hold the same value.
• Save your settings.

– Double-check Your Folder Names

Every time you run into the failed to load resource error, check your folder name and ensure it’s correct. Read the folder name letter-for-letter, as it’s easy for your brain to think the spelling is correct. We emphasize this because you might not look at folder names as the cause of the “failed to load resource” error. But, you should not, it should be the first thing when you encounter this error.

– Load the Correct File

In the href value of the <link/> tag in your code, ensure you load the correct file. That means if you want jquery-3.3.1.min.js, don’t request for jquery-3.min.js as you’ll get an error. The only rare case that you won’t get an error is if the server has that file named jquery-3.min.js. However, this is unlikely due to jQuery’s naming convention.

– Don’t Misuse the Forward-Slash Character

If you are running a website on GitHub pages, in the <link/> tag, be careful how you use the forward-slash in the href value. For example, the following < link /> tag causes an error:

<link rel=”stylesheet” href=”/css/main.css”>

Note the forward-slash at the beginning of CSS, i.e. “/css”. As a result, you get the following URL:

https://<your_github_username>.github.io/css/main.css

In most cases, this causes an error. So, the following is the correct form of the < link /> tag:

<link rel=”stylesheet” href=”./css/main.css”>

Therefore, this will point to the correct URL:

https://<your_github_username>.github.io/<your_website_repo>/css/main.css

In Express, you can serve your website from “/public”. (note the forward-slash). So, if you want to load a JavaScript file from this folder, use the forward-slash before the file name. For example:

<script type=”text/javascript” src=”/main.js”></script>

Be aware, to not use the word “public” before the file name.

Conclusion

This article explained what causes the “failed to load resource” error and how you can fix it. The following are the takeaway from this article:

• An invalid URL causes the “failed to load resource” error.
• Different values for WordPress Address (URL) and Site Address (URL) can cause an error.
• Misuse of the forward-slash on GitHub pages can cause a “failed to load resource” error.
• When you try to retrieve a non-existent file from a server, you’ll get the “failed to load resource” error.
• To prevent the “failed to load” resource error, always double-check your folder names.

With everything that we’ve taught you, we are confident you can fix the “failed to load resource” error. We advise that you print our article, and use it as a reference the next time you run into the error.

Something Interferes with The Requests to Communicate with The Server’s Resources

WordPress users know that themes, plugins, and WordPress systems run on PHP scripts. These PHP scripts are responsible for sending requests to communicate with the server’s resources.

Now, this is where the problem occurs. When something hinders these requests, the WordPress platform has difficulty fetching the resources.

That’s when the text “Failed to Load Resource” appears. To get a better idea of how this error occurs, it helps to see how WordPress generates a page.

It includes various folders and files, like stylesheets, scripts, and images. When the pages load, the files also load via the user’s browser.

However, there are times when the browser has an issue loading the files. In this case, the “failed to load resource” error will show up again.

In this instance, it will add a notice in the error console to help users solve or debug the problem.

Each error can be different, depending on the types of resources used on the website. These could be CSS stylesheet, Javascript, or an image.

Thankfully, the errors come with helpful messages next to them.

A Few Examples of The “Failed to Load Resource” Errors

• Failed to load resource: net::err_name_not_resolved
• Failed to load resource: the server responded with a status of 500 (Internal Server Error)
• Failed to load resource: the server responded with a status of 404 (Not Found)
• Failed to load resource net::ERR_CONNECTION_REFUSED

Despite having this error on one page of the website, the rest of the pages will work fine. However, bugs and loading issues are frustrating for visitors and can lead to less traffic.

The next part of this article will explain how to fix the “Failed to Load Resource” errors.

How to Fix the “Failed to Load Resource” Errors in WordPress

Note that it is vital to backup files before taking any action to fix the “Failed to Load Resource” errors. So, before doing anything, back up your files first.

Some of the issues occur because of incompatible plugins, URL configuration issues, or outdated plugins or themes.

Use these methods to solve the problem:

Edit the WordPress URL

Ошибка «Failed To Load Resource» – одна из самых неприятных проблем, с которыми сталкивались в последнее время многие пользователи WordPress.

Эту ошибку довольно трудно исправить, поскольку она может быть вызвана несколькими различными проблемами, такими как проблемы совместимости плагинов, проблемы URL-адресов HTTPS и другие.

В этом посте мы рассмотрим некоторые причины этой ошибки и предложим несколько возможных решений для ее устранения.

После исследования этой ошибки мы заметили, что многие пользователи WordPress по-разному сталкивались с проблемой «Failed To Load Resource». Некоторые нашли ошибку в консоли разработчика своего браузера, некоторые увидели ошибку в панели администратора WordPress, а некоторые столкнулись с этой проблемой при выполнении таких задач, как загрузка мультимедийных файлов.

Как вы знаете, в CMS WordPress, плагины и темы работают на PHP-скриптах. Эти сценарии отправляют запросы на связь с ресурсами, хранящимися на вашем сервере. Когда что-то мешает этим запросам, WordPress не может получить ресурсы. Это когда вы обычно сталкиваетесь с такими проблемами, как ошибка «Failed To Load Resource».

Как исправить ошибку «Failed To Load Resource 404»

Есть много разных причин возникновения ошибки «Failed To Load Resource». Использование устаревших плагинов или тем, проблемы с настройкой URL-адресов и несовместимые плагины являются одними из наиболее распространенных причин возникновения ошибки.

Вот несколько методов, которые вы можете попробовать исправить.

Способ 1. Отключите антивирусные плагины

Если вы столкнулись с ошибкой «Failed To Load Resource» с ошибкой состояния 400, например: “Failed to load resource: the server responded with a status of 400 () /wp-admin/admin-ajax.php”.

Тогда это обычно означает, что либо URL ресурса был изменен, либо плагин препятствует доступу WordPress к указанному файлу. В большинстве случаев антивирусный плагин может препятствовать доступу WordPress к некоторым файлам, которые он считает подозрительными.

Если на вашем веб-сайте на WordPress установлены антивирусные плагины или брандмауэры, попробуйте отключить их, чтобы проверить, решит ли это проблему.

Способ 2: отключить и повторно активировать все плагины

Ошибка также обычно вызвана проблемами совместимости плагина. Чтобы увидеть, вызвана ли ошибка плагином или какой из них нужно исправить, вы можете попробовать отключить все плагины на вашем сайте WordPress. Затем повторно активируйте плагины по одному, каждый раз обновляйте страницу и смотрите, появляется ли ошибка.

Следуйте этому процессу, пока не встретите ошибку и не найдете плагин, который вызывает ошибку.

Способ 3: обновить тему и плагины

Несколько пользователей WordPress жаловались на ошибку «Failed To Load Resource», появляющуюся в консоли разработчика Chrome, за которой следовало сообщение «Сервер ответил со статусом 404» .

Было обнаружено, что почти все обнаруженные проблемы вызваны устаревшей темой или плагином. Обновление до последней исправленной версии плагина решило проблему.

Если вы недавно обнаружили ошибку «Failed To Load Resource», попробуйте обновить ваши плагины и посмотреть, доступна ли новая версия вашей темы. Если нет, сообщите о проблеме разработчикам.

Способ 4: изменить URL-адрес WordPress по умолчанию

Причина многих случаев ошибок «Failed To Load Resource» была очень очевидной. В большинстве случаев ошибка появлялась только после установки SSL-сертификата и переключения сайта с HTTP на HTTPS.

Переключение веб-сайта на использование SSL обычно означает, что в URL будут внесены изменения. Иногда система WordPress и плагины могут быть запутаны, выбирая ресурсы через старый HTTP или новый HTTPS.

У некоторых пользователей проблема возникла из-за того, что URL для установки WordPress все еще использовал старый HTTP после переключения веб-сайта на HTTPS. Все, что им нужно было сделать, чтобы исправить проблему, это изменить URL-адрес WordPress.

Если на вашем веб-сайте также есть смешанные URL-адреса в настройках WordPress, перейдите на вкладку «Общие параметры» в панели управления WordPress и измените адрес WordPress (URL) на HTTPS.

Имейте в виду, что это очень рискованное решение. Пожалуйста, обратитесь за профессиональным советом к эксперту, прежде чем менять этот URL.

Если проблема не устранена

Поскольку эта ошибка встречается во многих формах, трудно предложить гарантированное решение, которое работает для всех сценариев. Если описанные выше способы не помогли решить проблему, рассмотрите возможность обращения в службу поддержки клиентов вашего веб-хостинга или обратитесь к опытному разработчику WordPress.

Are you getting trouble with the “Failed to load resource: the server responded with a status of 404” error on your website? Don’t worry, in this blog, we will provide you with various useful solutions to tackle this issue without any problem.

What caused the ” Failed to load resource: the server responded with a status of 404″ error

As you know, creating a dynamic page in WordPress includes a lot of files in the code including images, scripts, stylesheets, and much more. As the result, when the page load, these files are loaded by the user’s browser.

However, if your browser can not load any file, then the page will display the page without that file. Plus, the browser will inform a notice in the error console so that the user can handle this error.

Therefore, the “failed to load resource: the server responded with a status of 404” error is caused when your website’s code mentions a file but the browser can not download.

In different environments, each website will display this error with different messages next to them. For example:

• Failed to load resource: the server responded with a status of 404 (Not Found)
• Failed to load resource: the server responded with a status of 500 (Internal Server Error)
• Failed to load resource net::ERR_CONNECTION_REFUSED
• Failed to load resource: net::err_name_not_resolved

Although this error will occur on one page of your website, the rest of the pages will work smoothly. Nevertheless, this problem will be frustrating for your site’s visitors and can lead to lower traffic. Therefore, you need to fix this error to avoid unwanted problems.

So, how to handle this problem? Don’t wait your time, let’s keep reading the following solutions.

How to fix the “Failed to load resource: the server responded with a status of 404” error

Now, we will provide several ways to handle this issue, you can try to implement one of the following options to eliminate your problem.

Solution 1: Edit the WordPress URL

The first reason that can cause the fail resource error is the wrong WordPress URL settings. So, you need to login into your WordPress dashboard.

Then, navigate to Settings > General page and locate WordPress Address and Site Address options.

Let’s ensure that the URL from WordPress Address and Site Address option is not mistaken. In addition, you notice that www and non-www URLs are considered two different addresses in WordPress. Hence, once you enable the SSL on your website, the URL should start with https instead of http.

After you checked, scroll down to the bottom and click on the “Save Changes” button to save your changes.

Solution 2: Replace another theme

This error can be caused by an incompatible or outdated theme in your website. So, in this case, it is necessary for you to replace your existing theme with another compatible theme.

In order to replace another theme, first of all, you need to deactivate your current WordPress Theme. You can implement this by visiting the Appearance > Themes page.

In contrast, there are other installed themes on your website, you simply click on the “Activate” button. This will automatically deactivate your current theme. In case, you have not installed any theme before, you can switch back to the default theme.

After activating another theme, you now visit your website has been handled.

Solution 3: Disable and reactivate all plugins

Disabling and reactivating all plugins is also a simple and easy method that can help you resolve this problem if the missing resource is a WordPress plugin file.

You can do that by following the steps below:

1. Go to Plugins> Installed plugins
2. Click on Bulk Actions and choose Deactivate option
3. Click on the “Apply” button to deactivate all the plugins installed

After that, you can reinstall the plugin, for more support, you can visit our detailed guide on how to install the WordPress plugin for beginners.

Now, you can check the error on your website. If the problem still appears, let’s try the next solution that we demonstrate below.

Solution 4: Replace the missing resource

This is one of the prevalent solutions to handle this error. However, the first thing you need to make sure the “fail to load resource” error exists in advance of doing any changes on your pages.

In case the missing resource is any image, files, audio in your blogs, which means the media failed to upload or has already been removed. Therefore, you need to find them in your media library and replace them with others.

You can focus on the following steps:

1. Go to Media > Library. This will display a list of images, pdf files, audios,…
2. You need to look for broken images or files that are the files without any thumbnail
3. Replace those files with new ones
4. Uploading the new file

If you complete all the above steps, now your error should be handled effectively.

Sum up

“Failed to load resource: the server responded with a status of 404” error is one of the popular problems that most users encounter on their website. However, there are several useful methods that can assist you to tackle this issue without trouble. We have already displayed all simple and easy ways. Hopefully, you can try one of them to address your issue. If this error still exists on your website, let’s leave a comment below, we will support you as soon as possible.