🚀 Add to Chrome – It’s Free - YouTube Summarizer
Category: N/A
No summary available.
00:00
okay so things are working out using the browser and the postman as well so just to show you the output of Postman so when you click on this send you got this data in this J format right uh in fact in Postman also you can get in a text
00:15
format if you want but since it is Json we can get Json uh you can even request for XML but then for that you have to request for XML by default you request for Json okay but then let's talk about the front end now if you
00:30
if you remember we have seen the front end code and then I have stopped it so we'll run this once again basically when you run this it will open the page let's do that so I will say npm run Dev and it started on this port number so mind you
00:46
uh just to give you a hint so basically we are using this port number which is 5173 for the front end so when I click on this uh it will take you to the browser and you can see this is what it says the reason it is saying that something went wrong is something is
01:02
wrong right how do we know some what is wrong so what you can do is you can go to the inspect element and let's head back to the console and let's see what errors you get when you run this so refresh and you got an error so if you
01:18
try to understand so it says uh this is from origin this has been blocked by the cross cause policy uh no access no no access control allow now origin header is present okay so basically it gives
01:34
you a cause error which is cross origin resource sharing error so what is this see the server is running on port number 8080 first of all let's check if the server is running so I will just go back here run server is running right but the server is running on 8080 so if you head
01:49
back to your diagram here so the server which is this is running on ad8 port number and the front end react is running on five uh okay what is running on it's 5173 and they are basically running on
02:05
two different port numbers now what happens is for the security reasons U it is not allowed to send a request with with some other address maybe there will be some malicious uh website which is trying to access the resource so that's why they say okay hold on uh you can
02:20
only access from the same resource and that's why we are saying it is cause which is cross origin resour sharing eror so from from the same origin you can access it cross you not and that's what is happening here so we're getting this error how do we solve this now of course there are multiple ways of doing
02:36
that from the server side from the client side let's only focus on the server side now so if you want to solve this problem before spring boot we were supposed to do a lot of configuration but now in Spring boot what you simply do is you go back to your controller on top of your controller just say at the
02:52
rate cost origin okay that's it nothing changes by doing this just restart and and I don't see any error in the console that's a good thing okay now let me go back to the uh browser and hit this URL without the front end it works for the
03:09
same resource or when you're accessing from the browser directly but when you're try to access through the browser or through the front end let's refresh and you got the data so that was the issue and it was giving you error so whatever data was there in the database now you can see on the front end so what
03:24
is this uh okay so I have to go back to 100 so this is how it looks like I will go with the dark mode this looks good compared to the white mode doesn't matter okay so we got different products here and as you add more products you will see that here of course when I
03:40
click on ADD product this feature is still not here uh so in the upcoming videos where we talk about add product will change the front end as well home is this if you click on the lco it will take you to the lco homepage okay and if you click on categories it's not it's not enabled yet uh cart is also not
03:57
working if you can see search will also not work work add to card button from here will also not work so we have to enable this also when you click on each product I want to see their description so let's say if I click on Swift so what exactly the car features are so I want to know those things so maybe the
04:13
features like easily damageable or not safe card on the other hand Nexon safe card again I'm not promoting a car or saying anything it's just that opinions anyway so let's go back to the front end and let's see what is happening in the front end how you are sending the request so this is a page on the
04:30
homepage when you refresh the page it will hit this URL which is which is mentioned before and whatever data you get it will be set in the products and using that products we are running a map and for each product we are basically running it's like a loop kind of stuff
04:48
and you are fetching each element and you're printing or you're showing on the screen okay uh it's looking beautiful because of the CSS otherwise it's a simple stuff now how do you make other things basically if you see there's also add product but uh it says coming soon there should be some more code here and
05:05
for search also we'll we'll have that so nav bar I think it's not implemented yet so yeah so in this video we have talked about the cause origin which is mentioned here and we have solved this problem so now the front end and the back end is connected and now we can
05:20
focus on the next parts