WEBVTT 00:01.280 --> 00:06.110 Okay, now if I refresh the page here, I have some errors. 00:06.110 --> 00:09.740 So localhost 3000 and I have a fail to fetch. 00:09.740 --> 00:12.680 So this is happening for a few few reasons. 00:12.680 --> 00:14.180 And I will show you that in a second. 00:14.180 --> 00:21.530 But what we haven't done in the previous video, if we will go back to our code here, is we are trying 00:21.530 --> 00:22.460 to do this. 00:22.490 --> 00:28.250 If that fails, the entire kind of fetch it, there will be no response. 00:28.250 --> 00:29.450 So it's not going to go there. 00:29.450 --> 00:30.620 So it is failing. 00:30.620 --> 00:35.990 Before this, what we could do is prevent things like this are adding a try catch block. 00:35.990 --> 00:44.270 So if I will do a just before we fetch it, I will do try and I will open the curly braces. 00:44.270 --> 00:51.710 And then I can do at the end of this I can do a here in the same line I can do catch. 00:51.740 --> 00:56.060 So basically I will try to catch any error that will come there. 00:56.060 --> 01:05.500 So if I will get all of it and put it in the try, that will prevent me from anything that might go 01:05.500 --> 01:07.960 wrong, I will put it here. 01:07.960 --> 01:08.530 More space. 01:08.530 --> 01:12.040 So basically I wrap it with try and inside the catch. 01:12.070 --> 01:15.250 What I can do is I can set the error as well. 01:15.250 --> 01:17.230 So error getting data. 01:17.230 --> 01:21.850 So if that fail as a JavaScript code this this will fail. 01:21.850 --> 01:24.370 Then it will we will set the error here. 01:24.370 --> 01:29.500 So it will kind of help us getting back to to this situation. 01:29.500 --> 01:35.620 We are still not getting the, the the movies and partly partially is because I actually made a mistake. 01:35.620 --> 01:42.820 So it's not IAP movie, it's supposed to be API movies and slash and but if we go back here, nothing 01:42.820 --> 01:44.980 actually changed and there is a reason for that. 01:44.980 --> 01:49.990 So if I will right click and inspect this and we can go to console. 01:49.990 --> 01:51.940 And we have a lot of errors here. 01:51.940 --> 01:57.850 And the reason why you are not getting any movies is access to fetch from API. 01:57.940 --> 01:59.650 Um, this this was the old one. 01:59.650 --> 02:06.790 So if I will quickly clear it, you see, I'm trying to do to do API movies from origin. 02:06.790 --> 02:09.420 Localhost has been blocked by courts policy. 02:09.420 --> 02:10.530 So what does it mean. 02:10.530 --> 02:13.860 That's a browser security in place. 02:13.860 --> 02:20.400 So that means you can't really, uh, trying to access the data from, uh, from the server if it's 02:20.400 --> 02:21.750 not on the same domain. 02:21.780 --> 02:29.490 At the moment we have localhost here, 3000, and our API is blocking the Corso or the browser is blocking 02:29.490 --> 02:36.210 the course, but we can actually fix it, or we can actually configure it to make it work with our application. 02:36.210 --> 02:40.380 So what we need to do is we need to install this Django course header. 02:40.380 --> 02:42.150 So I can actually copy that. 02:42.150 --> 02:45.960 I can go to my API and I can paste it here. 02:45.960 --> 02:48.390 So pip install Django course headers. 02:48.390 --> 02:52.950 And that will install that in my API. 02:52.980 --> 02:57.660 What we need to do is if we go here basically that's a Django course headers. 02:57.660 --> 02:58.980 You can search that in Google. 02:58.980 --> 03:03.630 Or you can go to um pip org project slash Django course headers. 03:03.630 --> 03:04.860 As you can see here. 03:05.130 --> 03:08.610 And what we need to do is we need to set it up a few things. 03:08.640 --> 03:16.130 First we need to add it to install the app so I can copy that and go back to my settings here. 03:16.130 --> 03:18.680 So I'm inside the movie writer settings. 03:18.680 --> 03:20.870 You see installed apps here. 03:20.870 --> 03:23.810 I need to do it just before our application. 03:23.810 --> 03:31.610 So I will just load a course headers as an extra application there. 03:32.060 --> 03:35.900 What we need to do is also we need to do a course middleware. 03:35.900 --> 03:40.220 I need to put a course middleware just before the common middleware. 03:40.220 --> 03:41.510 So I'll copy that. 03:41.510 --> 03:49.400 And if we go back here and we go to the middleware and then we have that common middleware just before 03:49.400 --> 03:51.020 it, I can put it there. 03:51.020 --> 03:53.030 So so basically. 03:56.000 --> 04:04.190 So the last thing that we need to do is we need to go here and specify what origins we allow this to 04:04.220 --> 04:04.580 access. 04:04.580 --> 04:08.630 So our API can decide it from what sources we can fetch the data. 04:08.630 --> 04:11.360 We could do course allow all origins. 04:11.360 --> 04:15.510 That means every single origin will be able to fetch their data. 04:15.540 --> 04:17.460 This is not really secure way. 04:17.460 --> 04:21.420 It is fine for local development, but it's not a best way to do it. 04:21.450 --> 04:27.900 The better way will be to allow origins like this, and we'll have a list of all allowed origins that 04:27.900 --> 04:28.800 we want to specify. 04:28.830 --> 04:32.700 So we'll copy that and I will go here and anywhere in the settings. 04:32.700 --> 04:34.860 Really it doesn't really matter. 04:34.860 --> 04:38.160 I can put it here for example. 04:38.160 --> 04:43.290 And I can specify what origins I can access my data from. 04:43.500 --> 04:47.670 As you know our application is running on localhost 3000. 04:47.670 --> 04:54.120 So that means I can go here local and I can specify like 3000. 04:54.150 --> 04:57.270 I don't need for now any other things. 04:57.270 --> 05:02.100 I have only one application that is trying to access my data. 05:02.100 --> 05:04.980 So HTTP you need to put a protocol. 05:04.980 --> 05:11.550 If you are using HTTP and Https, you will need to actually specify both of them. 05:11.550 --> 05:16.110 So you could have multiple HTTP and https localhost here. 05:16.110 --> 05:19.340 If you have any other application running on different frameworks. 05:19.610 --> 05:21.650 You will need to also specify that here. 05:21.650 --> 05:26.060 So basically that will be a list of allowed origins that I can fetch the data from. 05:26.090 --> 05:32.690 So if I will save it and refresh the page in our server, you can see it is up and running now. 05:32.690 --> 05:36.680 So if I will go back to my application, this is what I had before. 05:36.680 --> 05:42.740 So I have this course policy blocked by course if I will remove this and refresh it. 05:42.740 --> 05:47.810 And now we have another error which is each list should be a unique key. 05:47.810 --> 05:48.200 Props. 05:48.200 --> 05:51.050 So it is if we go to network. 05:51.050 --> 05:54.230 If I go to the movies this time actually I got a list of movies. 05:54.230 --> 06:01.520 So you can see here there is a list of movies from my API coming, but I have another error and there 06:01.520 --> 06:04.520 are actually comes from here. 06:04.520 --> 06:10.910 So if I will go back here, you remember we try to render a movie. 06:10.910 --> 06:15.860 At the moment we don't have a simple string, so we can't really do it here. 06:15.860 --> 06:22.010 What we are like, we had like in the movies we had in the US states, a simple strings and we print 06:22.010 --> 06:22.540 it here. 06:22.540 --> 06:23.890 We can't do it anymore. 06:23.890 --> 06:30.910 What we have is we have movie which is complex object and we can try to render title. 06:31.660 --> 06:38.110 Also, what we need to do is whatever we do a map, we need to specify for them element a key and that 06:38.110 --> 06:43.000 will give um a react way to distinguish them between different items. 06:43.000 --> 06:51.400 So I will put a unique key so I can use I know unique is for me ID, so I can say movie ID will be unique 06:51.400 --> 06:52.540 key for that item. 06:52.540 --> 06:54.130 And we will display movie title. 06:54.160 --> 07:02.230 So if I will save it now and go back here, you can see I have list of Titanic word and avatar two. 07:02.260 --> 07:06.850 And the reason I have it here is because I have that movie. 07:06.850 --> 07:13.870 So if I go here and then maybe I can fix quickly add a title there, and if I will fetch it again, 07:13.870 --> 07:19.120 you can see I have two movies fetch from my database from my API. 07:19.150 --> 07:20.800 So this is working fine. 07:20.800 --> 07:25.270 That's how we fix the course with using that Django course headers.