GET net::ERR_ABORTED 404 Not Found error [Solved]

# Table of Contents

1. GET net::ERR_ABORTED 404 Not Found error
2. Make sure your script tags point to the right path
3. Serving static files correctly

# GET net::ERR_ABORTED 404 Not Found error [Solved]

The error "GET net::ERR_ABORTED 404 Not Found" occurs when one or more of the requested by the browser resources are not found on the server.

To solve the error, make sure:

1. The paths in the src attributes of your script tags are correct.
2. Your server is correctly configured to serve static files (JS, CSS, images, etc).
3. You haven't forgotten to specify the extension of the file you are loading.

You might encounter the error with a different name depending on the browser you use:

• GET http://localhost:5000/public/main.js net::ERR_ABORTED 404 (Not Found)
• Failed to load resource: the server responded with a status of 404 (not found)

The solution for both errors is the same.

# Make sure your script tags point to the right path

A common cause of the error is when you have a <script> tag that points to an incorrect path.

Copied!
<!-- ⛔️ GET http://localhost:5000/static/main.js net::ERR_ABORTED 404 (Not Found) -->
<script src="/static/main.js"></script>

The browser tries to load the specified resource but fails because it doesn't find the given file.

If your path is correct and starts with a forward slash /, try to omit the forward slash.

Copied!
<script src="static/main.js"></script>

The code sample assumes that you have a static/main.js file in the same directory as your index.html file.

Copied!
static/
  └── main.js

index.html

Make sure to restart your development server (if you have one) when making changes.

Conversely, if your path doesn't start with a forward slash /, try to specify the forward slash.

Copied!
<script src="/static/main.js"></script>

Copied!
# ✅ correct (specified .js extension)
static/main.js

# ⛔️ incorrect (forgot to specify extension)
static/main

If that didn't work either, try to use a prefix of ./ when specifying a relative path.

Copied!
<script src="./static/main.js"></script>

The example assumes that your directory structure looks as follows.

Copied!
static/
  └── main.js

index.html

If the file you are trying to load is located one directory up, use a prefix of ../.

Copied!
<script src="../static/main.js"></script>

The path assumes that your static folder is located one directory up.

Copied!
static/
  └── main.js

my-project/
  └──index.html

Similarly, if your folder is located two directories up, you would use the ../../ prefix.

Copied!
<script src="../../static/main.js"></script>

The example assumes that your directory structure looks as follows.

Copied!
static/
  └── main.js

my-project/
  └──nested-folder
     └──index.html

If the error persists, try to restart your development server and refresh your browser.

# Serving static files correctly

When your browser makes an HTTP request for a static resource (JavaScript files, images, CSS files), your server has to be correctly configured to find the resource on the file system.

For example, if you use Express.js, you can set up a middleware to serve your static files.

The following example assumes that you keep your static files (JS, CSS, Images, etc) in a folder called static that is located in the root directory of your project (where your package.json file is).

Copied!
app.use('/static', express.static('static'));

Your directory structure might look similar to the following.

Copied!
static/
  └──nature.png
  └──bundle.js
  └──styles.css
index.js
node_modules/

The first argument we passed to the app.use() function is the HTTP request path and the second is the request handler function.

The only argument we passed to express.static is the path to the directory that contains the static assets.

The example uses a static directory, however, you could give your directory a different name, e.g. public, assets, etc.

If the error persists, try to specify a relative path to your static folder.

Copied!
app.use('/static', express.static('./static'));

The code sample assumes that your static assets are stored in a static/ directory that is contained at the root of your project.

Copied!
static/
  └──nature.png
  └──bundle.js
  └──styles.css
index.js
node_modules/

If your relative path points to a folder in the same directory or a nested directory, it should start with ./.

Here are some examples.

Copied!
./static

./my-folder/static

./a/b/c/static

If your relative path points to a folder that is located one directory up you would use the ../ prefix.

Copied!
../static

The path assumes that the static directory is located 1 directory up from your index.js file.

Copied!
static/
  └──nature.png
  └──bundle.js
  └──styles.css
my-project/
  └──index.js
  └──node_modules/

If you have to navigate 2 directories up, you would use the ../ prefix twice, e.g. ../../static.

However, it is usually much better and more robust to construct an absolute path and pass it as an argument to the express.static() method.

Copied!
const path = require('path');

app.use(
  '/static',
  express.static(path.join(__dirname, 'static')),
);

The path.join() method is used to construct an absolute path to your static directory, e.g.:

Copied!
/home/bobbyhadz/Desktop/bobbyhadz-express/static

If the error persists, try to restart your development server and refresh your browser.