Cross Origin Request Blocked Spring MVC Restful Angularjs

This tutorial shows you the Cross Origin Request Blocked Spring MVC Restful Angularjs example that will resolve same-origin policy issue. The same-origin policy is the security concept implemented by browser to prevent actions from sending request to different source. Cross Origin Resource Sharing or CORS is a technique that allows restricted resources on a domain to be requested from another domain outside the origin domain.

According to same-origin policy and CORS you have to set the Access-Control-Allow-Origin header in the response to accept all clients or only permitted clients access the resources on the other domain. Let’s see how we fix this issue by creating the Cross Origin Request Blocked Spring MVC Restful Angularjs example.

Other interesting posts you may like

Table of contents:
1. Maven Dependencies
2. Project structure
3. Spring rest controller
4. Create simple view with AngularJS $http service
5. Demo Cross Origin Request Blocked Spring MVC Restful Angularjs example

Maven Dependencies
We need to use the following dependencies that supports to automatically serialize and deserialize the Java Objects to and from JSON.

Project structure
The Spring RESTFul Webservice has the following project structure
Cross Origin Request Blocked Spring MVC Restful Angularjs example

Spring Rest Controller
There are multiple ways you can implement a Rest Web Service using Spring MVC 4. But in this example, we will create the simple web service that produces a JSON array with help of Jackson library.

Deploy Spring MVC Restful application on server (for example Tomcat 8). Accessing the URL http://localhost:8080/cross-origin-spring-angularjs/fruits and the result should display such as the screen shot
Cross Origin Request Blocked Spring MVC Restful Angularjs example Json

Create simple view with AngularJS $http service
We create simple view with javascript codes which is not located in the application. The javascript codes will use AngularJS $http service to send ajax request to /fruits with method GET or POST.

Here, we create a angular module named FruitManagement. Then, we create angular controller named FruitManagementController to request directly to application resources on the server using $http service.

Run the above html page then click the button “Send request with GET method” we will get the error below in the browser developer tools console.
Cross Origin Request Blocked Spring MVC Restful Angularjs example error

This error is caused by the same-origin policy of browser. The browser will prevent any request which come from other domain, port or protocol.

CorsFilter
Now, we add a filter to resolve the above issue. The filter is completely java configuration without using web.xml. The filter looks like below:

Let’s dig deeper
The response.setHeader(“Access-Control-Allow-Origin”, “*”) line set the Access-Control-Allow-Origin header to the response. It mean that allows all other domain can access the resource.

Demo Cross Origin Request Blocked Spring MVC Restful Angularjs example

Deploy Spring MVC 4 Restfull appliation again on the server. Nothing to change on the spring rest service api. We are back to the html page and click the button “Send request with GET method”. The request is successful with the result screen below
Cross Origin Request Blocked Spring MVC Restful Angularjs example get

The angularjs request is passed the Cross Origin Resource Sharing or CORS of browser with the help of CorsFilter.
Notice If you allow all other domain request the resource is a bad practice. Allowing only trusted domain to consume your resources would be more resonable in fact.

That’is on the tutorial Cross Origin Request Blocked Spring MVC Restful Angularjs. Hope this example is useful for you.

References
CORS support in Spring Framework

Download complete source code of example, please click link below

Cross-Origin-Request-Blocked-Spring-MVC-Restful-Angularjs.zip (97 downloads)
angularjsexample.zip (64 downloads)

3 thoughts on “Cross Origin Request Blocked Spring MVC Restful Angularjs

  1. Hi,

    How can i get the same functionality with @CrossOrigin annotation from Spring?, I tried with the global option but doesn´t work for me, only work with the annotation at class or method level. I use spring mvc 4.2.6 (not spring boot).

  2. Hi Hector Diaz,

    You can enable CORS for the whole application is as simple as:

    @EnableWebMvc
    @Configuration
    @ComponentScan(“com.javabycode”)
    public class MyWebConfig extends WebMvcConfigurerAdapter {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping(“/**”);
    }
    }

Leave a Comment

*

Please share it if you found this useful
Hide Buttons