Java Spring Boot - REST Web Service - Security - CORS Policy Configuration - Allow All - Fix

hey what's up guys codforge here welcome in the next video today i would like to show you how to get rid of the cross origin resource sharing error so if you are a web developer or you want to became one you probably should know what is this course thing this error appears when you want to consume a restful api the endpoints exposed by the web service from your web application developed in for example angular react or view basically every web application that uses xml http request object or patch api on the screen you can find my angular application that works on the localhost port 4200 in the console we can find the error itself you can see that our request has been blocked we can also find that i was trying to make a get request on the localhost port 8080 slash items and this is basically the end point exposed by the java springboot web application which is working on my pc let's check out the angular code in the first place so we will see how the request is being sent okay so we are in the angular application right now and over here we can see the item service that i have created and the first thing we are doing is that we are injecting the http client to make some requests and we have two methods one for retrieving collection of item details and the second one for retrieving the specific item in the web browser we have seen the result only of the first one and we can see that we are simply executing the get request on the service url provided over here and we want to call the specific items endpoint let's go to the item components to see the usage of the get items method over here in the first place we are injecting the item service in the constructor and thanks to that in the ng on init lifecycle method we are able to use this item service so we are calling the get items method which one should return the collection of items and after that we are subscribing to the result of this method and in the provided callback function or arrow function we are assigning the returned items to the items collection in our class so here everything is good we don't have to make any changes in our front-end application but the problem lies in our back-end so let's quickly jump to the web service here is our back-end which we have developed in one of the videos it is the one-to-many web service that exposes the end points for the cards and for the items we are taking a look specifically on the item controller because from the front-end application we wanted to retrieve the collection of all items and we know that our request has been blocked by this course policy and if you want to expose one specific endpoint in our case it is this one which is called get items we can simply say cross origin under our get mapping annotation and inside between the parameters we can set the origins attribute in our case it will be set to http and our application is working on the local host port 4200 so this is the url on which our front end application is working and we have to specify the port because we are working in the development environment and our angular application is running on the live development server in the case when our front-end application is already deployed on some web server we don't have to specify the port so in this case we can get rid of this and because our application will be served by the web server but in our case since we are working in the development environment we need the port okay so let's restart the application and we will try to make a request again so i have restarted the web server and we are back in the web browser we can refresh the page and now we can see that error is gone let's add some test data using the swagger ui of our back-end web service so we want to open the item controller and over here you want to use the add item endpoint you want to hit try it out and we'll need only the serial number and it will be s1 s2 and one more s3 and also let's make a small change in the angular application over here i would like to call another endpoint just to show you that the one with the cross origin annotation is working so let's add the call of the second method in the ng on init we want to get specific item by id and also we'll need the object that can be displayed in the html so we'll add it over here so now we can save it and we'll go to the item component html and over here we'll uncomment this part so this basically will parse our json using the json pipe and we will be able to display the objects into the web browser so we can save it and we can go back to the web browser and over here we can see that our endpoint annotated with the cross origin annotation is working because we are able to retrieve collection of items in the case of the second endpoint which is not annotated with the cross origin annotation we are getting an error and the default object is being displayed so let's go back to the web service and we'll explore another way of configuring the course with this approach if you would like to expose right now also the second endpoint which will allow us to retrieve the specific item we have to copy this line over here and repeat it also over here and now let's say we also want to do it for the anoder for example for deleting the items which is over here and we have to do it again there is a better way of doing it so we can get rid of those cross origin annotations from here and also from here and we can put it on the class level so we can allow this specific origin or entire controller before the restart of the application i would like to mention few things it is also possible to configure more than one origin and to do it we can wrap it into the curry braces and after the comma we can specify another origin so let's copy it let's paste it over here and we'll change let's say the port to one and thanks to that both origins will be able to make a call to our endpoints it is also possible to define which methods are allowed and by methods i mean the http methods and we can do it this way so we want to say methods over here and between the curry braces we can specify the request method get so right now our item controller will accept only the get requests and if you want to also accept post request we can use comma and say request method post and the post request will be also accepted but we don't need this stuff right now so we can get rid of it we'll remove this and this now we will restart our application we are back in the web browser i have restarted the web service and also i have added again three items to our items collection and now let's refresh our web browser okay we don't have errors anymore and also the specific item has been retrieved from the database so our cross-origin annotation on the controller level is working there is one last thing i would like to cover in this video so let's go back to our web service and i will show you the best way to configure the course for your javascript input application in the first place we'll get rid of this cross origin annotation on our item controller and now we can create a new package so we want to right click select new and we'll call it config and in the config package we'll have a new class and we will call it course config first of all we want to mark it with the configuration annotation so we go to our class and over here we want to say configuration so spring will create a bin for this class and whenever it will be needed it will be injected by the spring inside our class we want to define one method and this method will be public and it will return the object that will implement the web mvc configure interface and let's call this method get course configuration like this and before we will implement the body of our new method first we want to mark it with the bin annotation and thanks to that spring we'll know that it should create the bin for the object returned by this method so later this bin can be injected whenever it's needed i have already mentioned that we will be returning the object so let's create it and it will go like this we will say return new webmvc configurer and over here we would like to override one of the methods from this interface and it will be add course mapping with the course registry parameter let's select it and let's hit ok so we have a new object which overrides one of the methods that comes from the interface and also we are missing a semicolon over here let's implement the body of this odd course mappings method and we can see over here that it accepts the course registry object as the argument so let's use it we want to go over here and we want to say registry and thanks to that registry object now we can make a configuration of the course first thing we have to specify is the mapping so let's use the dot notation and we'll call admapping method and as we can see it accepts a path pattern and thanks to that pattern we can specify to which paths our course configuration will apply and to apply our course configuration to every endpoint that our service is exposing we can say something like this and it will be slash and double asterix so it will apply to every endpoint exposed by our application and if you would like to expose only the endpoint that starts with the api for example you would like to do something like this so we want to prefix it with the slash api it will not work in our case because we don't have any path prefixed with their slash api so let's get rid of it after applying mapping now we can configure other stuff and for example we can configure the origins so we can go over here we can use the dot and we can call the allot origins method so for example we can specify here multiple origins so like in the case of the cross origin annotation you can say http localhost port 4200 and of course we can copy it and specify one more and you can it can be four two two zero one okay but we will need only the one so let's get rid of this extra one and the next thing that we can specify are the http methods which we want to allow so we can call the allot methods method and now we can specify what methods will be accepted so for example you can say get and also accept post we can also say put and the last one will be delete and if you don't want to specify them one by one and you want to accept each method you can simply put asterisks over here like this and the same applies for the allowed origins we don't have to specify the exact host and the port we can also simply put the asterisk over here but we want to be more specific in this case we can also specify the http headers in our case we'll accept all of them so we want to say allot headers and we'll simply put asterix over here and at the end we need a semicolon before we'll test it let's extract this origin url to the application properties because it will be easier later to configure our application without changing the code so we want to copy it and we want to open resources application properties and over here at the bottom you would like to specify a load origin property which will have the value of the localhost port 4200 and now we can go back to our course config and over here using the value annotation we can say value specified the name of the property it will be dollar curvy braces and it will be a load origin we of course need to import it from the spring framework and we'll put it on the private screen field with the name allot origin so now we can replace our url with the allowed origin property so we'll copy it and paste it over here now we are ready to restart our web service and after that i will add some test data and we'll test it in the web browser okay so our web service is restarted i have added free entries to the items collection and now we can refresh the page and we can see that our course configuration is working because the endpoint responsible for retrieving collection of items is returning the data and same goes for the end point that retrieves the item by id it is also returning the data so it's all good okay guys thank you for watching this is all i have prepared for this video i hope it will be useful for you to know how to configure course in your java spring boot application and of course remember about liking the videos and subscribing to the channel see you next time bye

Channel: CodeForgeYT

Views: 24,251

Keywords: programming, guide, tutorial, access, control, allow, origin, angular, exploit, api, policy, headers, explained, axios, in, java, spring, boot, is, present, on, the, request, resource, solved, response, http, web, service, controller, @crossorigin, bean, configuration, @bean, @configuration, annotation, all, error, solution, react, fix, any, multiple, origins, properties, methods, method, mvc, enable, cross, sharing, cross-origin, global, solve, fixed, intellij, step, by, beginner, disable, amazing, happy, cool, jre, easy

Id: Ly79YDERpas

Length: 17min 17sec (1037 seconds)

Published: Thu Nov 19 2020