Getting Unsupported protocol localhost error

Question

I am trying to use axios to fetch all employees data but I am getting this error: AxiosError {message: 'Unsupported protocol localhost:', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}} code : "ERR_BAD_REQUEST" config : {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …} message : "Unsupported protocol localhost:" name : "AxiosError" [[Prototype]] : Error

Here is my code EmployeeList.js

import React, { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom';
import EmployeeService from '../services/EmployeeService';

const EmployeeList = () => {
  const navigate = useNavigate();
  
  const [loading, setLoading] = useState(true);
  const[employees, setEmployees] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await EmployeeService.getEmployees();
        setEmployees(response.data);
      } catch (error) {
        console.log(error);
      }
      setLoading(false);
    };
    fetchData();
  }, []);
  

  return (
    <>
      <div className="container mx-auto my-8">
      <div className='h-12'>
        <button onClick={() => navigate("/addEmployee")}
        className="rounded bg-slate-600 text-white px-6 py-2 font-semibold"> Add Employees</button>
      </div>
      <div className="flex shadow border-b">
            <table className="min-w-full">
              <thead className="bg-gray-50">
                <tr>
                  <th className="text-left font-medium text-gray-500 uppercase px-6 py-3">First Name</th>
                  <th className="text-left font-medium text-gray-500 uppercase px-6 py-3">Last Name</th>
                  <th className="text-left font-medium text-gray-500 uppercase px-6 py-3">First Name</th>
                  <th className="text-right font-medium text-gray-500 uppercase px-6 py-3">Actions</th>
                </tr>
              </thead>
              {!loading && (
              <tbody className="bg-white">
                {employees.map((employee) => (
                  <tr>
                    <td className="text-left px-6 py-4 whitespace-nowrap">
                        <div className="text-small text-gray-500 "> {employee.firstName} </div>
                    </td>
                    <td className="text-left px-6 py-4 whitespace-nowrap">
                        <div className="text-small text-gray-500 "> {employee.lastName}</div>
                    </td>
                    <td className="text-left px-6 py-4 whitespace-nowrap">
                        <div className="text-small text-gray-500 ">{employee.emailId}</div>
                    </td>
                    <td className="text-right px-6 py-4 whitespace-nowrap font-medium text-sm">
                        <a href="#" className="text-indigo-600 hover:text-indigo-800 px-4"> Edit</a>
                        <a href="#" className="text-indigo-600 hover:text-indigo-800 px-4"> Delete </a>
                    </td>
                  </tr>))}
              </tbody>)}
            </table>
      </div>
      </div>
    </>
  )
}

export default EmployeeList;

EmployeeService.js

import axios from "axios";

const EMPLOYEE_API_BASE_URL = "localhost:8080/api/v1/employees";

class EmployeeService{

    saveEmployee(employee) {
        return axios.post(EMPLOYEE_API_BASE_URL, employee);
    }

    getEmployees() {
        console.log("improper");
        return axios.get(EMPLOYEE_API_BASE_URL);
    }
}
export default new EmployeeService();

seems a duplicate of this [Q here](https://stackoverflow.com/questions/73166678/data-is-not-sent-using-axios-to-backend-in-react-and-unsupported-protocol-localh) — KcH, Sep 11 '22 at 17:30
add http here, const EMPLOYEE_API_BASE_URL = "http://localhost:8080/api/v1/employees"; — Ritik Banger, Sep 11 '22 at 17:30

score 4 · Accepted Answer · answered Sep 11 '22 at 17:32

Because the URL you're using has localhost and does not have a protocol- http or https.:

const EMPLOYEE_API_BASE_URL = "localhost:8080/api/v1/employees";

Compare this to a URL with protocol:

const EMPLOYEE_API_BASE_URL = "http://localhost:8080/api/v1/employees";

OR

const EMPLOYEE_API_BASE_URL = "//localhost:8080/api/v1/employees";

Both above example would work.

Getting Unsupported protocol localhost error

1 Answers1