AngularJS - Request to localhost server fail

Question

I have made an api end point using express.

Now im trying to get the data from my localhost server that is running on port 3010.

$scope.getBooks = function(){
$http.get('/api/books').then(function(resp){
  $scope.books = resp;
});
}

The function is working good because i can test whit the JSONPlaceholder.com.

I cannot get my data, im using gulp on port 3002 and my server is in port 3010, he is running and working good, i can see my data using postman.

why can i get my data from the localhost server ?

Thank You

did you try to use postman on localhost:3002/api/books? you might need to configure a proxy, redirecting any /api/** request to port 3010. What gulp webserver are you using? — Oliver
– Oliver, Commented Mar 31, 2018 at 20:10
Hello Oliver, if i do that on postman i get Cannot GET /api/books, im not using any gulp webserver, i am using the express, im only using gulp for the front end structure not for server side — Hugo Seleiro
– Hugo Seleiro, Commented Mar 31, 2018 at 20:13
@Oliver, whit gulp, i dont know how to change that, he automatically choose 3002 — Hugo Seleiro
– Hugo Seleiro, Commented Mar 31, 2018 at 20:16

Mohammed Dawood Ansari · Accepted Answer · 2018-04-01 12:13:50Z

1

This issue happens because the API endpoint you are accessing does not implement CORS. If you run your code in Chrome and look at the console, you will see an error:

XMLHttpRequest cannot load .....

The solution is to change the API endpoint to set the Access-Control-Allow-Origin header to either the wildcard * or to the domain where the page using the JavaScript code will be served from.

For More Details on CORS

To prevent websites from tampering with each other, web browsers implement a security measure known as the same-origin policy. The same-origin policy lets resources (such as JavaScript) interact with resources from the same domain, but not with resources from a different domain. This provides security for the user by preventing abuse, such as running a script that reads the password field on a secure website.

answered Apr 1, 2018 at 12:13

Mohammed Dawood Ansari

90513 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Meghan · Accepted Answer · 2018-03-31 20:36:11Z

1

If your site is on port 3002 and your server is on port 3010 then you must specify the URL of the entire server's location

$scope.getBooks = function(){
    $http.get('http://localhost:3010/api/books').then(function(resp){
        $scope.books = resp;
    });
}

answered Mar 31, 2018 at 20:36

Meghan

1,26111 silver badges17 bronze badges

4 Comments

Hugo Seleiro Over a year ago

hello @sean , i have done that i got Failed to load localhost:3010/api/books: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:3002' is therefore not allowed access.

Meghan Over a year ago

then you have to make your server add the Access-Control-Allow-Origin: * header to the responses

Hugo Seleiro Over a year ago

if i put that url on my browser i can see my books, so the url is working nice

Mohammed Dawood Ansari Over a year ago

Isn't it case of CORS ? does your API hosted on port 3010 has CORS enabled ?

Prashant · Accepted Answer · 2018-03-31 22:25:48Z

1

Specify the entire url in AngularJS code and use CORS middleware in the express backend.

https://github.com/expressjs/cors

answered Mar 31, 2018 at 22:25

Prashant

8,1503 gold badges27 silver badges25 bronze badges

Comments

Anil Arya · Accepted Answer · 2018-04-01 11:58:09Z

1

This is bad way of doing front end(AngularJs) and backend development parallely on local on same machine. Try to fit Front-end repository to be hosted by BE server and use it in following way :

If you are doing FE development locally and backend server is also hosted locally.

use following line as common baseUrl

var baseUrl = "//" + window.location.host +'/'

Doing so, you don't need to update while committing changes to prod environment.

 $scope.getBooks = function(){
    var _url = baseUrl +  '/api/books'
    $http.get(_url).then(function(resp){
      $scope.books = resp;
    });
}

Above code works in case of same server FE and BE.

If you have different servers locally , you need to work more with setting :

You can use express-http-proxy

var proxy = require('express-http-proxy');

app.use('/api/', proxy('http://localhost:3010'));

In higher of version of angular 4+ , we have such setting as in initial configuration.

READ ARTICLE :
https://juristr.com/blog/2016/11/configure-proxy-api-angular-cli/

edited Apr 1, 2018 at 11:58

answered Apr 1, 2018 at 11:44

Anil Arya

3,1197 gold badges45 silver badges69 bronze badges

3 Comments

Hugo Seleiro Over a year ago

can you help me return this response to the front end without need to click ?

Hugo Seleiro Over a year ago

if i do <div ng-click="getBooks()" class="home-page"> {{books}} </div> it works but i dont want to click

Anil Arya Over a year ago

Use self provoking function to call getBooks method

Vishesh · Accepted Answer · 2018-03-31 20:10:54Z

0

You cannot just write /api/books. You need to specify your port number of API running on localhost. In your case localhost:3010/api/books

answered Mar 31, 2018 at 20:10

Vishesh

8322 gold badges8 silver badges16 bronze badges

7 Comments

Hugo Seleiro Over a year ago

Hello Vishes, i got an error like this if i do that Failed to load localhost:3010/api/books: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https

Vishesh Over a year ago

Did you specified your api path in index file in frontend?

Hugo Seleiro Over a year ago

What ? sorry i dont understand

Vishesh Over a year ago

You have to specify you API port number in front end. And by front end means there would be a main file in gulp from where it runs. so there you have to specify it that you API is running on this port.

Hugo Seleiro Over a year ago

I was looking at browserSync options !!

|

Collectives™ on Stack Overflow

AngularJS - Request to localhost server fail

5 Answers 5

Comments

4 Comments

Comments

3 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

4 Comments

Comments

3 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related