Skip to main content

How to Resolve the "TypeError: Failed to fetch, URL scheme is not supported" Fetch/Axios Error in JavaScript

When making API requests with fetch or Axios, you may encounter an error like TypeError: Failed to fetch accompanied by the message URL scheme "localhost" is not supported. or AxiosError: Unsupported protocol localhost:.

This is a common and simple mistake to fix. The error occurs because you have forgotten to include the protocol (the http:// or https:// part) in the URL you are trying to request.

This guide will explain why this error happens and show you how to fix it for both the fetch API and the Axios library.

The Core Problem: What is a "URL Scheme"?​

A complete and valid URL, also known as an absolute URL, is made up of several parts, the first of which is the "scheme" or "protocol." This tells the browser how to make the request.

Think of it like a mailing address:

  • http:// is the postal system (the "how").
  • localhost:5000 is the street address (the "where").
  • /users is the apartment number (the "what").

When you provide a string like localhost:5000/users, the fetch API or Axios library sees localhost: as the scheme. Since "localhost" is not a valid protocol like http or https or ftp, it fails and throws the "URL scheme is not supported" error.

The Solution: Always Include the Protocol​

The solution is simple: ensure that any URL you pass to fetch or Axios that includes a hostname (like localhost or example.com) is a full, absolute URL that starts with http:// or https://.

  • Use http:// for local development servers that are not running on SSL.
  • Use https:// for production APIs and any server running on SSL.

Practical Examples​

How to Fix the Error with fetch​

In this example, the http:// protocol is missing, which causes the error.

async function getUsers() {
  try {
    // ⛔️ This will fail because the protocol is missing.
    const response = await fetch('localhost:5000/users');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error); // Logs "TypeError: Failed to fetch"
  }
}

Solution: simply add http:// to the beginning of the URL string.

async function getUsers() {
  // ✅ This now works correctly.
  const response = await fetch('http://localhost:5000/users');
  const data = await response.json();
  return data;
}

How to Fix the Error with Axios​

The exact same logic applies to the Axios library, although the error message might be slightly different ("Unsupported protocol").

import axios from 'axios';

async function getUsers() {
  try {
    // ⛔️ This will fail with an "Unsupported protocol" error.
    const response = await axios.get('localhost:5000/users');
    return response.data;
  } catch (error) {
    console.error(error); // Logs "AxiosError: Unsupported protocol localhost:"
  }
}

Again, the fix is to add the http:// protocol.

import axios from 'axios';

async function getUsers() {
  // ✅ This now works correctly.
  const response = await axios.get('http://localhost:5000/users');
  return response.data;
}

Conclusion​

The "URL scheme is not supported" error is a simple mistake that is easy to fix once you understand what it means.

  • The core rule is: when you provide a URL with a hostname to fetch or Axios, it must be an absolute URL that includes the protocol scheme.
  • Always prepend http:// for local development or https:// for secure remote servers.

By ensuring your URLs are complete, you can avoid this common error and make your API requests reliable.

Table of Contents