Handling cors error in angular and springboot | enable CORS

hi guys welcome back to coding world today in this video we are going to see one small tutorial in that i am going to show you how to resolve the course error in our client server microservice so i have one ei service which is implemented in angular and this is a simple microservice all as it is i am keeping and uh i'm just calling my backend service in back-end service i have written one small hello world api which will return me hello i have not started it yet and i have created that microservice using a springy sensor where i am choosing 2.6.9 as a nano spring boot version then i am giving my group ids i am taking the packaging as a jar and here java and i have added a spring web as a dependency i'm going to show you this is a small micro service which has a main class and i have created this controller which it says that i have a c as a controller and in that i am having a gate method which will return me hello and this hello method i am calling from my angular project and in angular i am using i have created this angular project using ng new command and i have not did anything in this project apart from in app.component.ts file i am calling my api my backend api which is a get method and when i start when i call this api initially i will get a course error because in spring boot i am not allowing any requests which are not coming from your servers api servers url like if i started this application okay this simple application has been started and i am going to show you that it is returning if i say hello it is returning hello and i am calling this api in my spring good application if i call this i am getting course error because cross origin resource sharing is not allowed so that i have to tell my micro service let the request come from other url also and you have to filter out from which you are in you will allow those so for this we have to add a small bin which will handle all these scenarios which is so cross origin we can handle at our controller level in controller level if you make annotation as a cross and course cross origin and if you use it it has a star that means it will allow all it will allow to access your all methods and it is allowed from all apis let's restart this application and test okay now i will call this api and it it returning me a 200 so this is a it is returning hello so this is at your controller level but if you if your micro service has a multiple if your microscope has a multiple controller to be adding this annotation in all your method and it is not possible or sometimes it is a pro it is a beneficiary when you want to add the granule level access at your in your microservice if you open this cross origin in this cross origin it will take that all default origin which we are making as a star default allowed headers we are making as a star and allow credential also we are giving max edge we are giving so all these headers and methods you can and origin you can define and for those particular origin it will allow to accept that now i am going to show you how to add global level configuration to access your microsoft so i am commenting my cross origin annotation and in this okay now in this i am telling i am allowing only requests which are coming from localhost 4200 let me restart this application and test this so application has been started check check this is working or not on our on our ui so let me replace this and it's perfectly working it is returning me hello so this one so this is it guy this is a small video which will like explain how to solve the issue course issue in a springboard microservice if you want any other videos on particular topic please do comment in comment section and if you like such videos please subscribe my channel thanks

Channel: Coding World

Views: 13,586

Keywords: Handling cors error in angular and sprigboot, enable CORS, Enable Cross Origin Request for a REST API, Enable CORS, angular cors, springboot cors, spring web security, handling cors error in angular, enable cors in springboot, cross origin access issue, crossorigin annotations, local and global level cors handling

Id: rEJ7bOqBkdY

Length: 6min 2sec (362 seconds)

Published: Wed Jul 06 2022