Last updated: Mar 7, 2024
Reading timeยท4 min
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
.
Here is the complete stack trace.
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.
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.
# โ๏ธ incorrect (forgot protocol) localhost:5000/users # โ correct (specified protocol) http://localhost:5000/users
Specifying the protocol resolves the issue.
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.
# โ๏ธ 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.
# โ๏ธ 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:
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.
Here is the complete stack trace.
{ "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.
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
.
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.
# โ๏ธ 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.
# โ๏ธ 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.
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:
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.
# โ๏ธ 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://
.
# โ๏ธ 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.
You can learn more about the related topics by checking out the following tutorials: