Skip to content

Fetch API not running with port number on localhost [closed]

I am facing a strange error with fetch API in React.

TypeError: Failed to execute ‘fetch’ on ‘Window’: Failed to parse URL from http://localhost:5000​/api/v1/subroute/subroute2/lastXdays?rank=10&pageSize=5&currentPage=0&genre=Something&format=69&sort=Somecriteria

However when I remove the :5000 part from URL (and run the localhost server on port 80), it works fine.

Here is my fetch call:

  const response = await fetch(`${baseUrl}​/api/v1/subroute/subroute2/lastXdays?rank=${rank}&pageSize=${pageSize}&currentPage=${currentPage}&genre=${genre}&format=${formatId}&sort=${sort}` , {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
      'token': token
    }
  });
  return await response.json();

Why is it happening?

My server is running on port 5000 and it’s confirmed.

Answer

You have an invisible character just after the port number, remove it. Btw, if you copy-paste the URL into the DevTools console in Chrome, it will show the invisible character as a dot.