That was nice and easy with the concurrently package, we were able to spin up with the back end and
front end.
But what's up with this course?
Doozy.
And how we can fix that and cause error?
Probably one of the most annoying errors that you will encounter, especially while you are just starting
up with data fetching in JavaScript somewhere because it's not your syntax that's causing it.
Again, let me reiterate the code here is correct.
It's just that we are not indicating on our server any origins from which a browser should permit loading
resources.
And before I show you a great article about it and how we can add the fix.
Let me quickly showcase something where if I were to go to my client and in a public folder, very,
very important in the public folder.
If you're set up data, JSON or pretty much any JSON file for that matter and then add some kind of
dummy code, my is not his name is equal to John.
And if you go back to your dashboard and my cache, I'm going to comment this one out.
The local host 5000 because we'll come back to this one and uncomment my data, Jason.
So essentially, if I'm fetching the contents from data JSON in the use effect now, you'll notice that
everything is correct.
So it may refresh and check it out.
My name is equal to John.
So what I'm trying to reiterate is the fact that when we're getting the data from our own server, essentially
from the same origin, everything is going to work.
The problem is going to be when we're trying to do that from a different server in our script.
Now I also want to point out something where notice when we're fetching something from our own server,
we just go here with forward slash.
And essentially, this just signals to the server, to the React development server that the resource
is in its own backyard.
It's like a forward slash.
OK, I need to go and check for this particular resource.
Now, of course, if it doesn't exist, then it's a different scenario.
But in this case, we do have data, Jason, where we are successfully patching the data.
All right.
So hopefully that's clear, and I'll take a look at the actual error.
So what's causing the core error and two possible fixes that we can use?
And eventually we'll all go with the proxy one with the second one?
I still wanted to include the first one because I know I'm going to get the questions about it, so
might as well get that out of the way.
And if you want to find out more info, multi-course error here I left a link to a great resource,
which is Mozilla of all production.
And let me just read a few sentences.
Don't worry, I'm not going to read the entire article, but essentially cross origin.
Resource sharing or course is an ability b header based mechanism that allows the server.
This is very, very important server to indicate any origins, domain scheme and port other than its
own, from which a browser should permit loading resources.
So again, when we have our own origin, there's no issue.
Everything works like beaches.
The problem starts when we're trying to get something from a different origin and essentially we have
a very, very nice image that showcases that.
And now let me read this and then I'm going to go over this one one more time.
So for security reasons, browsers restrict cross origin.
It should be a request initiated from the script.
Our scenario worked, for example, blah blah blah fetch API follow the same origin policy.
This means that web application using those APIs can only request resources from the same origin the
application was loaded from unless the response from the origins includes the right course arrows and
essentially here to give you that.
You know, if you have domain a online, you have the request a vine unless there's proper headers.
You won't be able to get data from Domain B and more specifically, their JSON.
So essentially something similar that I just showcased here in our court example.
And once we know what is in the air.
Now let's take a look at our two fixes.