Fetch API cannot load localhost. URL scheme is not supported

# Fetch API cannot load localhost. URL scheme is not supported

The error "Fetch API cannot load localhost. URL scheme "localhost" is not supported." occurs when you forget to specify the http:// protocol when making an HTTP request to localhost.

To solve the error, start the URL with the protocol, e.g. http://localhost:5000.

fetch api cannot load localhost url scheme not supported

Here is the complete stack trace.

shell

Copied!
Fetch API cannot load localhost:5000/users. URL scheme "localhost" is not supported.
getUsers @ App.js:8

Here is an example of how the error occurs.

App.js

Copied!
async function getUsers() {
  //                      👇️ forgot to prefix with http://
  const response = await fetch('localhost:5000/users');

  const data = await response.json();

  console.log(data);
}

Notice that we forgot to prefix the URL with the http:// protocol.

shell

Copied!
# ⛔️ incorrect (forgot protocol)
localhost:5000/users

# ✅ correct (specified protocol)
http://localhost:5000/users

Specifying the protocol resolves the issue.

App.js

Copied!
async function getUsers() {
  const response = await fetch(
    'http://localhost:5000/users',
  );

  const data = await response.json();

  console.log(data);
}

If you use an SSL certificate when making requests to localhost, you'd use the https:// (secure) protocol instead.

shell

Copied!
# ⛔️ incorrect
localhost:5000/users

# ✅ correct (specified protocol)
https://localhost:5000/users

When you make requests to a remote API that is secure, you should also explicitly specify the https:// protocol.

shell

Copied!
# ⛔️ incorrect
await fetch('bobbyhadz.com/users')

# ✅ correct (specified protocol)
await fetch('https://bobbyhadz.com/users')

When making HTTP requests, always specify the protocol regardless if the API is hosted locally or remotely.

The error message states 'URL scheme "localhost" is not supported.'.

In other words, fetch() assumes that you are trying to use localhost as the URL scheme instead of http:// or https://.

If you get the 'TypeError: Failed to fetch and CORS' error, click on the following link.

I've also written articles on:

# AxiosError Unsupported Protocol localhost

If you try to make an HTTP request with the axios module without specifying the protocol you'd get the "AxiosError: Unsupported protocol ERR_BAD_REQUEST" error.

To resolve the issue, specify the http:// protocol when making the request.

fetch api cannot load localhost url scheme not supported

Here is the complete stack trace.

shell

Copied!
{
    "message": "Unsupported protocol loaclhost:",
    "name": "AxiosError",
    "stack": "AxiosError: Unsupported protocol loaclhost:\n    at dispatchXhrRequest",
    "code": "ERR_BAD_REQUEST",
}

Here is an example of how the error occurs.

App.js

Copied!
async function getUsers() {
  // ⛔️ forgot to specify the http:// protcool
  const response = await axios.get('localhost:5000/users');


  console.log(response.data);
}

To resolve the issue, specify the http:// protocol in the call to axios.get.

App.js

Copied!
async function getUsers() {
  const response = await axios.get(
    'http://localhost:5000/users',
  );

  console.log(response.data);
}

When you omit the protocol axios gets confused and raises the error.

shell

Copied!
# ⛔️ incorrect (forgot to specify protocol)
localhost:5000/users

# ✅ correct (has protocol)
http://localhost:5000/users

If you use an SSL certificate for your localhost server, use the https protocol instead.

shell

Copied!
# ⛔️ incorrect
localhost:5000/users

# ✅ correct (when using an SSL certificate locally)
https://localhost:5000/users

The same is the case when making an axios HTTP request to a remote API, the protocol should always be specified.

App.js

Copied!
async function getUsers() {
  const response = await axios.get(
    // ✅ specified https:// protocol
    'https://bobbyhadz.com/users',
  );

  console.log(response.data);
}

The error message states "Unsupported Protocol localhost".

This means that axios assumes that you're trying to use localhost as the protocol in the request instead of http:// or https://.

If you get an "Axios Network Error" when making the request, click on the following article.

I've also written articles on:

# Conclusion

When making HTTP requests to a local or a remote API, always make sure to specify the protocol, e.g. http:// or https://.

If you forget to specify the protocol, you will get one of the following errors depending on whether you use the fetch() built-in function or the axios third-party module.

Fetch API cannot load localhost. URL scheme "localhost" is not supported.
AxiosError Unsupported Protocol localhost.

shell

Copied!
# ⛔️ incorrect (forgot protocol)
localhost:5000/users

# ✅ correct (specified protocol)
http://localhost:5000/users

When making requests to a secure URL, make sure to set the protocol to https://.

shell

Copied!
# ⛔️ incorrect
localhost:5000/users

# ✅ correct (specified protocol)
https://bobbyhadz.com/users

You will get an error if you use the https protocol when making a request to a domain that doesn't have an SSL certificate.

If you make an http request to a domain that has an SSL certificate, you would likely get redirected to https without an error occurring.

However, it is always a best practice to specify the correct protocol when making a request.

If the protocol is omitted, both fetch and axios raise an error.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Fetch API cannot load localhost. URL scheme is not supported