json-server - Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension

2
votes

I am running an express server to serve my angularJS app on port 8000. I'm using an $http.get inside one of my services to hit an API.
I'm using json-server to host the API on 3000. When I enter the URL in the browser, I get the JSON served. But when I open the app, the following error is shown in devtools:

XMLHttpRequest cannot load localhost:3000/techData. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

this is the angularjs service:

techApp.factory('techData', function ($http) {
  let data;
  $http.get('localhost:3000/techData')
    .then((response) => {
      data = response.data;
    });

    return {
      techData: data
    };
});

I saw this issue and learnt that json-server allows cross origin requests.

1
angularjsjson-server

1 Answers

4
votes

Ok, in case anyone is here, I had not used the URL with http. Changing the argument given to $http.get as follows solved the problem:

$http.get('http://localhost:3000/techData')