Spring RESTfull Web Service + AngularJS HTTP 404 error

Question

I'm trying to consume webservice on my local machine and use AngularJS $http. Via browser everything works fine and I receive correct JSON response. But with AngularJS $http I receive 404 error, however, handler is found and response is being generated.

FrontEnd:

$http.get('http://localhost:8080/apartments.json').
            success(function(data){
                $scope.apartments = data;
            }).
            error(function(data, status){
                alert("Error "+ status);
            });

BackEnd:

@Controller
public class ApartmentsController {

    @RequestMapping(value = "/apartments", method = RequestMethod.GET)
    public @ResponseBody List<ApartmentEntity> getAll(){
        ApartmentEntity apartmentEntity = new ApartmentEntity();
        apartmentEntity.setName("test");
        apartmentEntity.setPrice(1000);
        return Arrays.asList(apartmentEntity);
    }
}

Servlet is mapped correctly.

Could you please suggest what is wrong?

The vital question here is if your RESTful endpoint is being served under the same origin as your client application. If that is the case, then we can delve into why the endpoint is not being hit. Otherwise, we may need to talk about CORS or proxying strategies. — Edwin Dalorzo
– Edwin Dalorzo, Commented Feb 19, 2014 at 17:15
In fact, Websevice is being hit from browser and from client side as well. I suspected the issue with cross domain request, but i don't receive any message regarding it. Only 404 error. — Serhii Shevchyk
– Serhii Shevchyk, Commented Feb 19, 2014 at 17:23
@shevchik I think you are not getting my question. Can you tell me the protocol, hostname and port for your RESTful server, and the same for the one serving your application? For instance, RESTful server is: http://localhost:8080 and Web application is being reached from http://localhost:4040. Then you have a CORS conflict. — Edwin Dalorzo
– Edwin Dalorzo, Commented Feb 19, 2014 at 17:30

Angular University · Accepted Answer · 2014-02-20 00:05:30Z

1

The problem is that Angular is by default trying to use CORS as this is an ajax request attempt from one page loaded from one server to a REST service running in another server.

The way it tries to use CORS is by issuing the GET with a default header that triggers the browser to do a 'pre-flight' OPTIONSrequest.

This pre-flight automatic OPTIONS request is for the browser to get the list of supported methods by the server, and this is the first step of CORS.

So the 404 comes from this OPTIONS request.

See this issue in Angular, it seems that this was fixed in more recent versions as it was causing a lot of questions from users. See also the original issue that triggered the fix.

In you case for local development you can always deploy both applications in the same server and the problem is solved.

If in production it's necessary to run frontend/backend on separate servers, then either proxy those servers by a common frontend server like nginx/Apache or or turn on CORS, see enable-cors.org.

answered Feb 20, 2014 at 0:05

Angular University

43.2k15 gold badges79 silver badges81 bronze badges

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

2 Comments

Serhii Shevchyk Over a year ago

Thanks for explanation where does 404 error come from

Edwin Dalorzo Over a year ago

@shevchik An alternative approach to enabling CORS (which may not be always possible [not speaking technically]) is to proxy your requests. That is, all RESTful endpoint requests, can be forwarded by you own web application server to the appropriate RESTful endpoint server. Since the server-side is not subject to CORS.

Collectives™ on Stack Overflow

Spring RESTfull Web Service + AngularJS HTTP 404 error

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related