Consuming Java Spring REST service with angular.js issue

Question

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(":-(");
            })
    }
}])

Community · Accepted Answer · 2017-05-23 11:50:47Z

1

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.

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Apr 8, 2015 at 15:23

pablochan

5,72530 silver badges42 bronze badges

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

4 Comments

IcedNecro Over a year ago

It's strange, when I put an url to the address line of my browser, It successfully receives the Http response and prints "LOL", as expected when you see through dummy() method, but when I execute the same url with angular, browser shows a CORS error. I've also tried to change response headers, but it didn't help

pablochan Over a year ago

The restriction applies only to AJAX requests. When you put the URL in the address bar, from the browser's perspective, you're accessing a separate resource. Try using this plugin: chrome.google.com/webstore/detail/allow-control-allow-origi/…

IcedNecro Over a year ago

What about your edit, does it require any maven dependencies?

IcedNecro Over a year ago

Well, thank you very much, I've add your xml code to web.xml and it works now :)

Bandit · Accepted Answer · 2015-04-08 15:07:50Z

0

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.

answered Apr 8, 2015 at 15:07

Bandit

318 bronze badges

1 Comment

IcedNecro Over a year ago

server is deployed at 127.0.1.1:8080 and client on 127.0.1.1:8000, and it changed nothing

Collectives™ on Stack Overflow

Consuming Java Spring REST service with angular.js issue

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related