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

2 Answers 2

Reset to default
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.

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

4 Comments

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
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/…
What about your edit, does it require any maven dependencies?
Well, thank you very much, I've add your xml code to web.xml and it works now :)
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.

Improve this answer

1 Comment

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.