Understanding CORS in Spring Boot: Handling Cross-Origin AJAX Requests | CORS Explained

this video tutorial i will explain what is cross origin resource sharing and how to enable cross origin resource sharing here you can see rom bookstore.com which exposes web service and this web service returns a list of books based on the incoming request here you can see the website which is developersitea.com and here you can see another website which is developer site b.com both are different origins and different domains if http requests sent from different origins or different domains using ajax or javascript then this web service won't return the response back if cross origin resource sharing is not enabled because of security reason by default cross origin requests are not allowed if the service need to send response for http request which is coming from different domains or different origins from javascript or jacks then we need to enable cross origin resource sharing which is nothing but corrs suppose say cross origin request sharing is enabled for this origin then only this sergeant can send request to this web service and it can get the response back if you see these three origins or domains it looks similar to this allowed origin but it is not similar in the first origin the protocol is different here http here https in the second origin port number is different here 8090 here 8080 and the third one hostname is different and if origin is different then it will not be allowed now we will see how to send http request and reproduce cross origin issue here you can see springboard demo application and it has a user controller and it has a method to create the user update the user get the user etc now i am going to start this application in 8080 port this application is started in 8080 port this is the context path here you can see one more spring boot demo application the project name is springboot demo ajax and using this application we can send request to this application to create the user and it has user view controller it has add user method when you send request to this path it returns this name add hyphen users and if you see corresponding html is created here and in this html here i have defined the user model and converting the user model to json then using post method using this url i am sending the json content to this application as a http request and here you can see application.properties this application i am going to run in 9090 port now i am going to start this application and this application is started in 9090 port and here you can see the button click here to submit the form this button when you click on this this method will be called and the user create request will go to the springboot demo application enable the developer tools click on this and here you can see we got cross origin issue here you can see the error message the error message says access to xml http request at this url from this origin has been blocked by cors policy and click on network and here also you can see cors error click on this this is the request url and this is the payload and we didn't get any response next we will see how to solve this cors issue now we will see how to enable a cross origin request in rest controller here you can see web security class in that configure method we have to enable cors http dot cors save this changes then go to user controller here you can see user controller class which is a rest controller and it has a create user method in this method i have applied cross origin annotation and origins i have specified star star meaning from any origins or any domains http requests are allowed and this method will process the request and send the response back we will run this application and see whether it is working or not and if you see user stable there is no users are there click on this button and we got alert and if you see there is no corrs issue and here you can see one record is created here i have specified origins as star meaning any origin and if i want to specify only particular origin then i have to do like this in the origins i have to specify only one origin like this so from only this origin the request is allowed and this method will process the request and send the response back the first one i have commented out and the second one i have enabled now we will start the application see whether it is working or not delete this record click on this and you can see there is no cors issue and user is successfully created and if you want to specify multiple origins then what we can do is we can specify the origins with comma separated like this so in this origins end with 9090 port and 9091 port are allowed we will run this application and see whether it is working or not and if you see there is no cors issue and record is successfully created here we have allowed cross origin for only create user method and if you see there are a lot of other methods also there in user controller class suppose you want to apply cross origin for all the other methods in this user controller then what we have to do is copy this and apply in class level and command this save this changes now we will run this application and see whether it is working or not and if you see there is no corrs issue and user record is successfully created now we will see global cors configuration suppose say we have a web service application it has user controller login controller and order controller and all this controller we want to enable cors configuration in one common place then what we can do is we can use the concept called global cors configuration we will see how to do that in user controller class i have enabled a cross origin annotation command this one and here i have defined the class web config which implements a web mvc configurer and override iod cors mapping method and this method accept registry and in this class i have applied a configuration annotation here i am calling a ad mapping method of registry and here we have to specify path pattern basically mapping uri and for this uri corrs will be enabled then i am calling allowed methods and passing http methods for these methods cors will be enabled and here i am passing a post and get then i am calling allowed origins and here we have to specify what and all origins corr should be enabled now i am going to start this application delete this click on this and we got alert message and we didn't get corrs issue refresh and one user record is created suppose i want to enable cors for all the mapping all the methods and all the origins then i have to do like this all the mappings means slash star star and all the methods means star and all the origins means star now i am starting this application we got alert message and we did not get cors issue and here you can see one user record is created now we will see how to enable cors in spring security configuration suppose we have web service application it has three controllers and all these three controllers i want to enable cors we will see how to do that first command this global configuration here you can see web security class and which extends web security configurer adapter and in this class enable web security annotation is applied and in configure method http.cors dot and we have to add that we have already seen if a b name cors filter is provided then that will be used our cors configuration source is provided then that will be used we will define the beam cors configuration source here i have defined the method corrs configuration source which returns cors configuration source b here i have applied bean annotation and here i am creating a cors configuration object then i am setting allowed arginess star meaning all the origins are allowed and set allowed methods are star meaning all http methods are allowed and allowed headers i have applied star meaning all http headers are allowed and allowed credential i have set it as true so this is for whether user credentials are supported or not and i have set it as true here i have created url based cors configuration source object and then i am calling register cors configuration method and passing the path pattern and the configuration and it returns the source object now i am going to start this application click on this and we got alert message and we did not get the corrs issue and here you can see one user record is created you can get java source code link for each video in the description section of the video here you can see the description section click on show more and here you can see the java source code links click on these links to get the java source code

Channel: Ram N Java

Views: 848

Keywords: Spring Boot, CORS, Cross-Origin Resource Sharing, AJAX, HTTP Requests, Web Development, Security, API, Cross-Origin, RESTful Web Services, Cross-Origin Requests, Web APIs, CORS Policy, CORS Configuration, Web Security, Web Services, Cross-Origin AJAX, Cross-Origin Handling, CORS Best Practices, Web Development Tutorial, CORS Tutorial, CORS in Spring Boot, Secure APIs, Web Development Basics, API Security

Id: BmDSsmUpMjI

Length: 18min 8sec (1088 seconds)

Published: Sun Feb 20 2022