How to set up a cors policy in ReactJS with Laravel Sanctum | Laravel tutorial | React Tutorial

so in this video I'm going to show you how to set up novel sanctum with react.js and how we can actually use access to set up a course policy using lab or sanctum and level so after started out by creating two pure new apps here one is the front end with the react and I don't want to sit back in with lavell inside the E&V file we actually don't need to use any of this in here except for one configuration and that's basically we need to allow it to only use a session domain and in this case only one a whitelist localhost so you can grind list local also maybe on your development deployment you can whitelist something like your the name name whatever fits you so if you're gonna just write localhost here other thing we need to do in order this to work is we need to go inside our configuration inside the course and then here we want to allow anything inside API directory login and logout and we want to allow this function here we're gonna call in order to basically set the cookies with Axios you can use any thing you want to use this but we're just using access because this is easy to go with and it's used a lot of places so other thing you just wanna make sure is that there's support credentials is set to true and that's actually everything in for the configuration here so what we want to do now is inside lavel here we can require sanctum so if we just go inside back-end and in here let's go in and require this there's a couple of things we need to do in here and these are fairly simple we just need to publish the render files and migrate this and change a few things in our kernel so in our front-end let's quickly go in here as well and just store Axios and inhale is now going and make sure we publish the winter files and also we set up and migrated you can even use this to set up your authentication system if you fancy so but now I'm just dispensing I'm gonna show you how to create a boilerplate here and you don't need to migrate obviously needs to set up database configuration so I'm gonna skip that path for now but I just set up the database configuration that will be fine but this is essentially just a boilerplate to allow you to easily get stand with your react F and have course policy set up with level so with that said now whatever we have this set up here and what we can do now is we can go in or just make sure we put in this one here so inside our app ATP kernel and then inside API one we want to have to want up here in the table actually sorry so we want to have this one and make sure to import that at the top as one and beside that we actually don't need to do anything else now so now we can you can use this to generate a totem for the user or you can use it with a spay application but we're not really going to be looking into that so for now what we can do is we can go in here on the front end and we can just run this and on the back end we can also just quickly one here and beside that what we can do as the last part is we can go and set Axios up inside the front end so in this case what we can do is we can say we want to get rid of the logo to index or CSS found at the CSS file so if you just get rid of C file don't really need any of these fancy so let's go inside our index of GSR and in here let's get rid of index a CSS file and inside after change file let's remove everything from here and then inside here if just want to sweet so we can just do is we can in here or we can do it inside yeah it doesn't really matter but what we just want to do is we want to make sure we set their credentials so in this case let's just do it when the app actually start so let's go up here maybe on import access from access and then let's just say X yes and then we want to just call the get method and in order to do this we just need to find this to the locals and the I can't state how important is that if you whitelist only the local host it won't work on 127 that co2 Co that one so you need to use the logo otherwise it will fail so you need to make sure your whitelist right once in here in to donate that is to the names you want to have whitelist it and then we just need to say sanctum CS is cooking so what this should do is you should set a cookie inside our browser now I'm just gonna remove all of these here I'm gonna remove this gonna refresh the page and as you can see right now we have no cookie set so we need to think our wire doesn't want to set the cookie so inside the network tab let's just try to home drain here the reason why I just want to set this is because when you use access in this case it automatically blocks you for setting any cookies so what you want to do is you want to say with credentials so true if you don't do this the cost policy won't work so now in the case now if we go in and look to add what you will see now is inside our application we have set some cookies and these cookies now allow you to actually secure application more and make a request so what we can quickly just do here to test out this it's inside our routes this is going to create a quick route here and we just want to call this Fuli and then we want to just return something so what you should see now is because this is all under - API if we go inside our index at J's file and we can go in here and say API and then remove this what we should see now inside the network's app here if we refresh the page and we just we just get returned something

Channel: Tilly The Coder

Views: 7,046

Keywords: development, laravel 7 tutorial cors, reactjs laravel, laravel reactjs, laravel tutorial, reactjs cors policy, reactjs cors, Tilly The Coder, Matilde Wittrup Enevoldsen, Matilde Wittrup, How to set up a cors policy in ReactJS with Laravel Sanctum | Laravel tutorial | React Tutorial

Id: 0GpZ4_QgkzI

Length: 8min 32sec (512 seconds)

Published: Mon May 25 2020