[Episode 40] Enabling CORS in Spring Boot

foreign [Music] I want to talk about a common error you will get when you are making an HTTP request from the client side to the server side application here is a piece of JavaScript code trying to make an HTTP post request to our login API endpoint the URL is correct method is correct and here is the base64 encoded username colon password everything looks good so if we make this request the server side is supposed to return this response to the client side flag is true code is 200 message is user info and a Json web token and the data has two things user info and a Json web token so let's make this request so right click that's a view in browser let me press F12 to show you the console as you can see it failed access to fetch at this URL from origin null has been blocked by course policy response to pre-flight request does not pass Access Control check no access control allow origin header is present on the requested resource what I just showed you is an example of cross origin request the domain of the front-end JavaScript code you just saw is different from the domain of our spring boot application for security reasons browsers restrict cross-origin HTTP requests initiated from Scripts for example the fetch API we just used follows something called same origin policy this means that a web application using fetch API can only request resources from the same origin the application was loaded from apparently in this example the front end and the back end they're from different Origins then what should we do because we know that it is very common to deploy front-end and backend separately then what should we do it turns out there is a technique called course which stands for cross origin resource sharing this mechanism supports secure cross-origin requests and data transfers between browsers and servers so we need to enable course in our spring boot application next let me toggle over to IntelliJ to enable cores in a spring boot project you only need to do two things first let's create a configuration class so in this case I'm going to create this class under Security package and let's call it course configuration and also annotate it as configuration [Music] it's class let's define a method called public and the return type is webmvc configural let's call it course configurable and it returns an instance of web MVC configure now there are many methods that you can override and in this case we're only interested in this one add course mapping so here we're going to enable course for the entire application for all incoming requests registry dot add mapping slash wildcard so this is a global course configuration it applies to all endpoints and don't forget to expose it as a bin if you're using Sprint Security in your Sprint boot project you have to do one extra thing so let's go to security configuration and let's recall that this is the configuration class for Sprint security we defined many security configurations in this class in security filter chain method here is where we should enable course in Spring Security you can add the code anywhere you want before dot build but I prefer to edit after csrf dot course and here we need to pass in a customizer and the default customizer works very well so a quick summary in order to enable course in a spring boot project you have to do two things number one create a course configuration class and number two if you are using Sprint security make sure you add line 78. now let's restart our spring boot application okay so our Sprint boot application is running let's toggle over to Google Chrome and make a request so let's make a request all right now this time the error is gone instead we're getting this beautiful response with a flag equal to True code is 200 means success and this data has user info and this Json web token or GWT here is the message I hope you now understand how to enable course in a spring boot application see you in the next video

Channel: Bingyang Wei

Views: 4,866

Keywords:

Id: 5HAzLAnJPKU

Length: 6min 54sec (414 seconds)

Published: Thu Apr 06 2023