-: In the last section, we spoke a whole bunch
about the error message that we got
regarding CORS access to our API server.
Remember, CORS is something that comes up
whenever our domain, subdomain, or port changes,
which is absolutely the case here.
We're currently on port 8080,
and we're trying to access a server on port 3090.
So in this section we're going to
fix up this CORS issue a little bit.
As I mentioned in the last section,
CORS is something that is not easily or at all
circumvented on the client's side alone.
So there's not some magic switch in the browser
where you can magically say,
"Hey, just ignore CORS for all time," right?
Again, CORS is here to protect users
who are in a browser environment,
so there's no easy way to circumvent it.
So to fix this CORS issue,
we're actually gonna change our server.
We're gonna tell our server to allow connections
from any port, any domain, any subdomain,
and just handle them without a care in the world.
This is a very common approach for API servers of all types.
With any API server,
the expectation is that people
from anywhere on the internet
should be able to access your server,
unless, you know, you wanna limit it for some reason.
So let's get started.
Again, our goal here is to
enable our API server for CORS requests.
In practice, it's gonna be pretty darn easy.
Pretty straightforward.
So over in my terminal,
I'm in my server window right here.
So I still have my client going over here
that's serving the JavaScript application.
So this is Webpack over here.
I'm gonna go back over to my process
that's currently running my server
and I'm just gonna kill it.
Now we're going to install a package
that's going to help us enable CORS.
To do so I will npm install and save cors.
A pretty aptly-named project, you might say.
So it's a very small, very small install here.
Very quick.
Once it's installed,
we can start our server back up again with npm run dev.
Cool, we got it back up.
Now I'm gonna open a code editor for my server.
And inside of my top-level index.js file.
So here's my top-level index.js.
Inside of here, we're going to require in the CORS module.
So we just required in CORS.
And now to enable CORS for all use cases
across our entire application,
we can tell our application to use CORS.
And we're going to make sure to invoke CORS.
So CORS gets its own parentheses here.
Oh, and make sure we spell use right.
Cool. So what's going on here?
CORS is a middleware.
Remember talking about middlewares a little bit?
Not on the Redux side, but on the express side.
We had already set up an express middleware
to handle authentication.
This is another middleware that is
specifically going to handle CORS.
And in this case, this middleware is gonna say,
"Hey, is this request coming from a different port,
"different domain, different subdomain?
"Okay, that's fine. You know, let's let it through.
"Don't throw any type of error.
"Don't throw an error back to whoever's making the request
"and tell them that they're violating CORS principle here."
So that's all this middleware is doing.
The CORS middleware,
you can also look up some documentation on it,
and if you so chose, you can pass it a set of options here
to say, "Hey, only let in CORS requests coming from,
"say, some very specific domain."
And so that might be something
that you'd be interested in here.
You know, perhaps you don't want to open your API
to the entire world.
Maybe you want to just open it up
to one very particular domain.
And so that'd be the place to specify that configuration,
right here.
While we're in our server, this is gonna,
so this is gonna take care of the CORS issue.
While we're in our server, I wanna make
one other very small change over in our router.
So here's our router file.
Again, the router for our server.
When we had put together a server originally,
we put in, under the root route, res.send,
and then we just sent back hi: 'there',
which wasn't super useful.
Just to make our client-side application
make a little bit more sense,
I wanna change this res.send from hi: 'there' to message,
and we're gonna send back a string that says
"Super secret code is ABC123," like so.
Again, just doing this to make the client side stuff
a little bit more reasonable.
You know, when we eventually finish up
the client side-authentication,
we're going to want to make a authenticated request
just to test out everything, you know,
make sure everything's working a-okay,
and it makes a little bit more sense to get back
some JSON that contains a property 'message'
as opposed to some JSON that contains the property 'hi.'
So, you know, again, just something to make, down the line,
make things make a little bit more sense.
Okay, so that's our server.
Let's verify.
Yep, it looks like the server restarted successfully.
I don't have any syntax errors or anything like that.
Our server should now be allowing CORS requests.
So let's flip back over to the browser,
and we shouldn't have to refresh anything over here
'cause our server is already restarted.
All we should have to do is click the sign in button again
and make sure that we don't get another error here.
So I'm going to clear my log here,
click sign in, and hot dog.
It looks like we first got an options request here.
An options request is something that is issued
whenever CORS comes into play.
And then we have this follow up request
which is the actual request we're trying to make.
It's a POST request, and it looks like the response
does in fact contain a token, which is exactly what we need.
So it looks like on the client side,
we now have the ability to kind of reasonably somewhat
log into our application, which is exactly what we need.
So there's still a lot of work to do here.
You know, like I said, we still need to
navigate the user when they successfully sign in.
We need to save this token.
We need to handle error cases.
So still a hefty amount of work to go on here.
Let's get to that in the next section.