CODEWITHSUNDEEP
javajavascriptangularjsspring
IcedNecro
IcedNecro

Reputation: 75

Consuming Java Spring REST service with angular.js issue

I have an issue related to CORS. I'm writing client-server app using angular and Spring. When I want to send some HTTP Request, Browser shows that there is a "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/..." error. I've deployed REST on localhost using Tomcat, and now I try to consume any response using angular, deployed with "npm" server, but I can't do it because of CORS issue. What am I doing wrong? Here is the code Snippets:

Server side:

@RequestMapping(value="/dummy", consumes="application/json", method=RequestMethod.GET)
public @ResponseBody String dummy() {

    return "LOL";
}

Client side:

var authorizationApp = angular.module("authorizationApp", ['PageController','ngRoute']);

authorizationApp.config(function($httpProvider) {

  $httpProvider.defaults.useXDomain = true;


  delete $httpProvider.defaults.headers.common['X-Requested-With'];
});

authorizationApp.config(['$routeProvider', function($routeProvider) {
    .....
}])

var pageController = angular.module('PageController',[])

pageController.controller('PageCtrl',['$scope', '$routeParams', '$location', '$http', function($scope, $routeParams, $location, $http) {
    ..................................

    $scope.someFunc = function() {

        $http.get("http://localhost:8080/rabota/student/dummy")
            .success(function(data, status,headers,config) {
                alert("sent");
            })
            .error(function(data, status,headers,config) {
                alert(":-(");
            })
    }
}])

Upvotes: 0

Views: 239

Answers (2)

pablochan
pablochan

Reputation: 5715

By default, your browser will not allow AJAX requests to a different domain (or the same domain with a different port). There is a number of ways to address this:

  • proxying requests to the backend through the server that hosts the frontend
  • adding the Access-Control-Allow-Origin header to the backend's response
  • hosting the frontend and backend on the same server
  • disabling the same-origin policy in your browser

If you just want this to work on your local machine, the easiest way is to disable security in your browser (for Chrome: Disable same origin policy in Chrome).

I recommend reading this article, if you want more detailed information: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

EDIT: If you're using Tomcat 7 (or above) you can try adding the below snippet to your web.xml file

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>http://HOST:PORT</param-value>
  </init-param>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

Where HOST and PORT are the host and port of your npm server.

Upvotes: 1

Bandit
Bandit

Reputation: 31

This is becuase you are starting up your web client on a different host instead of localhost. Try your external IP and see what that gets you.

Upvotes: 0

Related Questions