Live server Failed to load resource: the server responded with a status of 404 (Not Found)

Hi! I got error like this: Failed to load resource: the server responded with a status of 404 (Not Found) face-api.min.js:1 Uncaught (in promise) Error: failed to fetch: (404) Not Found, from url: http://127.0.0.1:5501/models/tiny_face_detector_model-weights_manifest.json at face-api.min.js:1 at face-api.min.js:1 at Object.next (face-api.min.js:1) at n (face-api.min.js:1) :5501/models/face_landmark_68_model-weights_manifest.json:1 Failed to load resource: the server responded with a status of 404 (Not Found) :5501/models/face_recognition_model-weights_manifest.json:1 Failed to load resource: the server responded with a status of 404 (Not Found) :5501/models/face_expression_model-weights_manifest.json:1 Failed to load resource: the server responded with a status of 404 (Not Found)

I clone the repository without changing anything, not sure what's wrong.

Your files are not under the JSP folder that's why it is not found. You have to go back again to 1 folder Try this:

Or

Note the failing URL:

Now examine one of your links:

The "../" is shorthand for "The containing directory", or "Up one directory". This is a relative URL. At a guess, you have a file in /jsp/<somefolder>/ which contains the <link /> and <style /> elements.

I recommend using an absolute URL:

The reason for using an absolute url is that I'm guessing the links are contained in some common file. If you attempt to correct your relative pathing by adding a second "../", you may break any files contained in /jsp.

Hope this helps!

Enroll in the online course to become the Web Development Masters. 

Thanks!

Web developers and common users sometimes face an error while accessing their website called “Failed to load resource: the server responded with a status of 404 (not found)”. In this article, we will take a closer look at this problem and a way to fix this.

How to Fix this Error?

The error is raised when the website is unable to load the CSS and the JavaScript code. This makes the site non-functioning and is a big headache for users. Even if the CSS and JavaScript code is correct, the contents of the page might not load.

The only way to fix this is to make sure that the CSS and JS files are properly linked within the HTML. Check whether the folder, file and directory name of these files are spelt correctly.

Another way to fix this is by using an absolute URL instead of a relative URL. 

For example, instead of using a relative URL path

Please use absolute URL path

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

Contents

• Why Server Fail to Load a Resource Causing a Status of 404 Happens?
  • – Invalid Relative Paths
  • – Invalid URL
  • – Typographical Error in a Folder Name
  • – Non-existent File Name
  • – Misuse of the Forward-Slash Character
  • – A Missing Resource
• How To Fix Failed to Load Resource Warning?
  • – Use the Right Relative Path
  • – Use the Correct URL
  • – Double-check Your Folder Names
  • – Load the Correct File
  • – Don’t Misuse the Forward-Slash Character
• Conclusion

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.

• Author
• Recent Posts

Position Is Everything: Your Go-To Resource for Learn & Build: CSS,JavaScript,HTML,PHP,C++ and MYSQL.

How do you fix the server responded with a status of 404 Not Found?

How do I fix failed to load resources?

How do I fix error 404 in Chrome?

What is a 404 page error?