Back to: Spring Boot Tutorials
Spring Boot CORS Support
In this article, I am going to discuss Spring Boot CORS Support with Examples. Please read our previous article where we discussed Spring Boot Thymeleaf Consuming RESTful Services with Examples.
What is CORS?
CORS stands for Cross-Origin Resource Sharing. This is a security concept that allows the restriction of resources. It prevents one Spring Boot application from making API requests to another Spring Boot application. In the previous exercise, the same application was supplying and consuming the API. However, if we were to shift the consuming part to another project, it will not work.
What happens if CORS support is not present?
If CORS support is not present, one application will not be able to use the REST API of another application. In the previous exercise, we saw that the same application is supplying and consuming the REST API. This is impractical since in most cases, the REST API is supplied by one application and consumed by another.
Let us see now practically what happens. We have created a new project, which is supposed to consume the fruits API. We are using the same code and HTML files from the previous project but placed them in a different project. Since two different applications are running, we have set up the consuming application to run on another port. When trying to access the webpage, it would be empty:
The expected output should be:
Upon inspecting the webpage (using the inspect option in the web browser), we can see the error in the console section:
How to add CORS Support in Spring Boot?
There are two methods to enable CORS support: globally and locally.
Method 1: Enable CORS support globally. Modify the ConsumerestApplication.java class in src/main/java/com/dotnet/consumerest directory.
We have performed the following modifications:
- Imported required packages
- Programmed a Bean to allow CORS for the view-products and add-products webpages.
Method 2: Enable CORS support locally. Modify WebController.java in the src/main/java/dotnet/consumerest/ directory.
We have performed the following modifications:
- Imported required packages
- Added @CrossOrigin annotations to the functions that require CORS support
When you have done either of these modifications, compile and execute the application. The expected output should be visible.
The Complete Example Code
ConsumerestApplication.java
package com.dotnet.consumerest; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication public class ConsumerestApplication { public static void main(String[] args) { SpringApplication.run(ConsumerestApplication.class, args); } }
WebController.java
package com.dotnet.consumerest; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.RequestMapping; @Controller public class WebController { @RequestMapping(value = "/view-products") @CrossOrigin(origins = "http://localhost:8080") public String viewProducts() {return "view-products";} @RequestMapping(value = "/add-products") @CrossOrigin(origins = "http://localhost:8080") public String addProducts() {return "add-products";} }
add-products.html
<!DOCTYPE html> <html> <head> <title>Add Products</title> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function() { $("button").click(function() { var productmodel = { id : "5", name : "Fig" }; var requestJSON = JSON.stringify(productmodel); $.ajax({ type : "POST", url : "http://localhost:8080/products", headers : { "Content-Type" : "application/json" }, data : requestJSON, success : function(data) { alert(data); }, error : function(data) { } }); }); }); </script> </head> <body> <button>Click here to submit the form</button> </body> </html>
view-products.html
<!DOCTYPE html> <html> <head> <title>View Products</title> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $.getJSON("http://localhost:8080/products", function(result){ $.each(result, function(key,value) { $("#productsJson").append(value.id+" "+value.name+" "); }); }); }); </script> </head> <body> <h1>Fruits: </h1> <div id = "productsJson"> </div> </body> </html>
In the next article, I am going to discuss Spring Boot Internationalization with Examples. Here, in this article, I try to explain Spring Boot CORS Support with Examples. I hope you enjoy this Spring Boot CORS Support article.