Okay, now if I refresh the page here, I have some errors.
So localhost 3000 and I have a fail to fetch.
So this is happening for a few few reasons.
And I will show you that in a second.
But what we haven't done in the previous video, if we will go back to our code here, is we are trying
to do this.
If that fails, the entire kind of fetch it, there will be no response.
So it's not going to go there.
So it is failing.
Before this, what we could do is prevent things like this are adding a try catch block.
So if I will do a just before we fetch it, I will do try and I will open the curly braces.
And then I can do at the end of this I can do a here in the same line I can do catch.
So basically I will try to catch any error that will come there.
So if I will get all of it and put it in the try, that will prevent me from anything that might go
wrong, I will put it here.
More space.
So basically I wrap it with try and inside the catch.
What I can do is I can set the error as well.
So error getting data.
So if that fail as a JavaScript code this this will fail.
Then it will we will set the error here.
So it will kind of help us getting back to to this situation.
We are still not getting the, the the movies and partly partially is because I actually made a mistake.
So it's not IAP movie, it's supposed to be API movies and slash and but if we go back here, nothing
actually changed and there is a reason for that.
So if I will right click and inspect this and we can go to console.
And we have a lot of errors here.
And the reason why you are not getting any movies is access to fetch from API.
Um, this this was the old one.
So if I will quickly clear it, you see, I'm trying to do to do API movies from origin.
Localhost has been blocked by courts policy.
So what does it mean.
That's a browser security in place.
So that means you can't really, uh, trying to access the data from, uh, from the server if it's
not on the same domain.
At the moment we have localhost here, 3000, and our API is blocking the Corso or the browser is blocking
the course, but we can actually fix it, or we can actually configure it to make it work with our application.
So what we need to do is we need to install this Django course header.
So I can actually copy that.
I can go to my API and I can paste it here.
So pip install Django course headers.
And that will install that in my API.
What we need to do is if we go here basically that's a Django course headers.
You can search that in Google.
Or you can go to um pip org project slash Django course headers.
As you can see here.
And what we need to do is we need to set it up a few things.
First we need to add it to install the app so I can copy that and go back to my settings here.
So I'm inside the movie writer settings.
You see installed apps here.
I need to do it just before our application.
So I will just load a course headers as an extra application there.
What we need to do is also we need to do a course middleware.
I need to put a course middleware just before the common middleware.
So I'll copy that.
And if we go back here and we go to the middleware and then we have that common middleware just before
it, I can put it there.
So so basically.
So the last thing that we need to do is we need to go here and specify what origins we allow this to
access.
So our API can decide it from what sources we can fetch the data.
We could do course allow all origins.
That means every single origin will be able to fetch their data.
This is not really secure way.
It is fine for local development, but it's not a best way to do it.
The better way will be to allow origins like this, and we'll have a list of all allowed origins that
we want to specify.
So we'll copy that and I will go here and anywhere in the settings.
Really it doesn't really matter.
I can put it here for example.
And I can specify what origins I can access my data from.
As you know our application is running on localhost 3000.
So that means I can go here local and I can specify like 3000.
I don't need for now any other things.
I have only one application that is trying to access my data.
So HTTP you need to put a protocol.
If you are using HTTP and Https, you will need to actually specify both of them.
So you could have multiple HTTP and https localhost here.
If you have any other application running on different frameworks.
You will need to also specify that here.
So basically that will be a list of allowed origins that I can fetch the data from.
So if I will save it and refresh the page in our server, you can see it is up and running now.
So if I will go back to my application, this is what I had before.
So I have this course policy blocked by course if I will remove this and refresh it.
And now we have another error which is each list should be a unique key.
Props.
So it is if we go to network.
If I go to the movies this time actually I got a list of movies.
So you can see here there is a list of movies from my API coming, but I have another error and there
are actually comes from here.
So if I will go back here, you remember we try to render a movie.
At the moment we don't have a simple string, so we can't really do it here.
What we are like, we had like in the movies we had in the US states, a simple strings and we print
it here.
We can't do it anymore.
What we have is we have movie which is complex object and we can try to render title.
Also, what we need to do is whatever we do a map, we need to specify for them element a key and that
will give um a react way to distinguish them between different items.
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
key for that item.
And we will display movie title.
So if I will save it now and go back here, you can see I have list of Titanic word and avatar two.
And the reason I have it here is because I have that movie.
So if I go here and then maybe I can fix quickly add a title there, and if I will fetch it again,
you can see I have two movies fetch from my database from my API.
So this is working fine.
That's how we fix the course with using that Django course headers.