0

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(":-(");
            })
    }
}])
IcedNecro
  • 65
  • 2
  • 14

2 Answers2

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.

Community
  • 1
  • 1
pablochan
  • 5,269
  • 23
  • 40
  • 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 – IcedNecro Apr 08 '15 at 15:30
  • 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: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi – pablochan Apr 08 '15 at 15:34
  • What about your edit, does it require any maven dependencies? – IcedNecro Apr 08 '15 at 15:54
  • Well, thank you very much, I've add your xml code to web.xml and it works now :) – IcedNecro Apr 08 '15 at 16:02
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.

Bandit
  • 31
  • 6