Instructor: In the last section,
we spoke about why we were seeing that error message
and we spoke about CORS requests in great detail.
So in this section, we're gonna make a small change
to our application that's going to allow us to
make a request from localhost 3000
over to our backend API hosted at localhost 3090.
Now, in order to solve this issue,
we're going to make a change
to the configuration of our API.
So, all this stuff, remember when I repeated
probably more times you wanted to hear,
all this security stuff is hard coded into our browser
and we have no way to try to get our browser to say,
oh yeah, you know what, don't worry about that CORS stuff.
We'll just do our best.
So, the browser is always gonna do this security step.
Nothing we can do to stop it.
So, to make our application work,
we're gonna change the way that our backend API
views this cross origin request.
So rather than making our backend API say,
hey, you know what, it's only okay
if you make this request from my bank dot com.
We're gonna change our backend API to instead say,
hi browser, you can make this request from anywhere.
So now, when we try to do our request
over to localhost 3090,
which is where our application is hosted
or the API is hosted,
we're still going to do this step inside the browser
where the browser says, hey API, can I make this request?
But now, the backend API is going to respond and say,
oh yeah, sure, localhost 3000, no problem.
Don't sweat it.
You can make a request from there.
And so now, our browser is going to say
back to our JavaScript code, sounds great.
You can make the request over to that different port
and then our request is going to succeed.
So, to solve all this CORS stuff,
it really comes down to our server configuration.
That's how we fix CORS errors.
So, with that in mind, let's get to it.
To enable CORS requests on our backend API, real simple,
straightforward configuration step we have to do.
I'm gonna first flip back over to my terminal
where I have my API running.
I'm gonna kill my API.
I'm gonna start up my code editor
inside that server directory.
And then finally, back inside the terminal,
I'm going to add one tiny package to the server folder.
So again, this is a module that we're going to install
into our server side project.
So, I'm going to run NPM install dash dash save CORS.
So, the module we want to install,
CORS, that's all it's called.
So, go ahead and install that.
I've already installed it myself,
just to keep you from having to wait and watch it install.
And then once it's installed, I will open up my code editor
and I'm going to open up my index dot JS file.
So, inside of here, we're going to import that CORS module
that we just installed.
So, I'll say const CORS is require CORS,
and then I'm going to wire it up to my express application
in this app setup section down here.
And so inside of here,
I'll add on app dot use CORS, like so.
So, this is the default use of the CORS module.
When we wire it up to our express application,
it's gonna make our express application say,
oh yeah, hey request from any URL in the world,
don't worry about it, totally fine.
We can, optionally, further configure CORS to say,
only accept requests coming from localhost 3000
or from any specific sub-domain, domain, or port
if we want to.
But in our case, we're just putting together
a very simple development application here.
So, we're just going to allow requests
to come in from anywhere.
So now, I'm gonna save this file.
I'll flip back over to my terminal
and start my server back up with NPM run dev.
So, there's our server running,
server listening on port 3090.
I'm now gonna flip back over to our React application.
I don't have to do any refresh over here
or anything like that because, again,
this is strictly a server side restriction.
I am going to clear my console.
I'm gonna clear my request log
and then I will submit my form again.
And now, I will see that I was able to successfully sign up
with a POST request over to our backend API.
Awesome. So now, if we inspect this request,
I can go to the preview tab and I'll see my JSON web token
on the token property.
Just what we expected.
Okay, so in this section we fixed up that CORS error
by doing a little bit of configuration on the server side.
Again, I can't say it enough.
Remember the CORS restriction is implemented
by your browser,
and there's very specifically nothing you can do
as a developer to circumvent that restriction
because it is specifically made to restrict you
from making requests to other domains.
So, we have to configure our server
to allow requests to come in from these other domains
or ports or sub-domains or whatever it may be.
Okay, so now that we've got our token
and we've successfully signed up to our application
let's take a quick break right here,
and we'll continue in the next section
by figuring out what we want to do with this token
inside of our client side app.
So, quick break and I'll see you in just a minute.