Instructor: In the last section,
we jumped through a whole bunch of different hoops.
It was a really long section.
We hooked up Redux Thunk, we imported Axios.
We made a POST request, we formed our URL up.
We were piping through the email and password.
All this set up, all this set up.
And then the final culmination,
when we finally tried to POST our form,
was a big, fat red error right here.
Something about, no access control allow origin header.
So, if you've ever worked on a web project yourself before,
you may have seen this error message.
It is certainly one of the more frustrating
error messages out there,
because this error is definitely not plain English.
It is something where you really have to go
and read on Google.
You know, basically, just do a Google search for it
and kind of figure out what's going on there.
So, definitely a very frustrating error to get.
Let's take some time to talk about
exactly what this error message is talking about.
And so, for a little bit here,
for this section and probably the next one,
we're going to take a little bit of a break
from all the topics of Redux Thunk and authentication,
all that kind of stuff.
This is a total diversion, a total side topic.
So, we're gonna bench this stuff,
we're gonna talk about that error,
and we're gonna come right back to this.
Okay, so unrelated to this, Redux Thunks
and all that kind of good authentication stuff.
Total side topic.
So, back in the browser,
you know, I'm not gonna read the error back to you.
I know you can read just as well as I can,
but if you wanna pause the video and check it out,
you're certainly welcome to.
So, the error that we got is what is called a CORS error.
And when I say CORS, CORS is an acronym.
C O R S.
CORS stands for Cross Origin Resource Sharing.
And I might have gotten that slightly wrong.
Feel free to correct me in the comments, if I did.
I'm sure someone will.
Anyways, CORS is a security protocol,
or, kind of, a concept in security.
The sole purpose of CORS is to protect users
in a browser environment.
Keeping, you know, keep that in mind,
that is the sole purpose, that is what it does.
It is there to protect users
from people on malicious websites.
So, CORS is a security protocol that looks
at your current domain and port
and attaches that to any AJAX request that is made.
So, if I click on the request that we just made right here,
and we look at request headers,
we can see that we have a host and an origin,
and, specifically, note how the origin includes both
the current domain that we're on, localhost, and the port.
The server can then inspect this domain and port, and say,
if it is not the same port and domain and sub-domain
that the server is running on,
by default it's gonna say CORS error.
In other words, I don't know exactly why
you are making a request from this other,
like, unknown domain.
I only expect requests to come in from my current domain.
And so that's, kind of, confusing English.
Let's look at a diagram to help clarify.
So, this diagram right here has two possible cases.
The first one, the green case at the top
is like every day normal AJAX requests.
And the one at the bottom is something
that would result in a CORS error.
So, let's walk through this
from a different perspective, a different angle.
So, let's say that you are an engineer at google dot com,
and you're making a web app that, at some point in time,
needs to make an AJAX request.
You are making a web app that is hosted on google dot com,
so when a user is on your app,
the URL is literally going to read google dot com, right?
You know, that makes sense.
Let's say that you are making an AJAX request
to your backend server, which is hosted on google dot com.
In this case, presumably the domain, sub-domain and port
of the user's browser matches up exactly
to the domain, sub-domain and port of the backend server.
So, total match, you know, same, same domain,
same port, same domain, same port on both sides.
In that case, request is good, no issue with CORS.
Where CORS comes into play, is when a user is on a website,
like say google dot com,
that tries to make an AJAX request to a different domain,
a different sub-domain or a different port.
Like, let's say they try to make an AJAX request
to github dot com.
In this case, the server would,
can, optionally, reject the AJAX request,
and say, this is a violation of CORS.
And that is the exact error message that we just saw.
So right now, inside of our application,
we are on localhost 8080.
So, our domain is localhost and our port is 8080.
We tried making an AJAX request to domain localhost,
but port 3090, that means that CORS
all the sudden comes into play.
We are making a request to a different port
and that means that our request is subject to CORS.
Now, the entire purpose of CORS in the first place,
again, is just to protect users.
That's all it's there for,
is to protect users in their browser.
So, if I go to like, let's say,
you know, hacker website fake place dot com.
Hopefully this doesn't actually, oh God, it's okay.
No, not a website.
Thank goodness.
You never know what's gonna pop up,
you know, when you put in a silly URL.
Anyways, let's say I go to some hacker website,
you know, some malicious website,
and the code inside of malicious website right here,
tries to make an AJAX request to,
say, Wells Fargo dot com or Bank of America dot com.
In that case, I would want to protect my user,
you know, whoever might be, or whoever's
coming to this place,
I would want to somehow recognize
that the source website, you know, the domain
that the user is on, is not the same as my API server.
You know, it's not a place that I actually trust.
And so, that's where CORS comes into play.
It is solely to protect users.
So, you might be saying to yourself,
well, Steven this doesn't make any sense.
We've been making a ton of requests
with Postman already, right?
Like, why didn't we have any CORS issues over there?
That's a great question.
So, I've already got Postman loaded up,
and remember Postman is all about making network requests.
So, I've already got localhost 3090 in here,
I'm using the signup route, it's a POST,
and I've got my email and password in,
and I can send the request, and okay,
well, email is in use, but if I change the email.
Boom, I get a token here.
So, no CORS error, nothing like that.
So, why did I get a CORS error in the browser,
but not with Postman?
And that again, again, is the reason for that
is that CORS is solely security protection
for users in a browser.
To enforce CORS, your server is gonna look at,
it's either the host or origin header
on the request right here.
And all headers on a request are very easily
and trivially easy to fake.
So, you can fake a header at any point in time.
So, CORS doesn't really, you know, it's not there
to protect people from maliciously trying
to access your server.
It is there to protect users who are inadvertently,
or don't want to make an AJAX request to your server.
Okay? So, long winded explanation, but at the end of the day
purpose of CORS is just to protect users
in a browser environment.
If you've never interviewed for a JavaScript position
before, by the way, like front end development,
man, CORS is probably, like, one of the best,
most common interview questions, I would say, out there.
And so, if you're looking to do an interview
anytime in the future, I highly recommend
you do some more research into CORS.
But you know, that's it in a nutshell.
That's it, in summary.
So, with better understanding of exactly what CORS is,
how in the world do we, you know, how do we solve this?
So, I bet if you've ever gotten
this error message right here before,
you know, something that says, you know,
the no access control origin.
Okay, you probably Googled the error.
You read about CORS and then probably the very next
search you did was JavaScript AJAX request circumvent CORS,
or bypass CORS, or you know, something like that, right?
That's probably the very next Google search you did.
How do we get around CORS?
How do we resolve this error?
So, let's talk about how we do that resolution
inside the next section.
I'll catch you there.