1 00:00:00,660 --> 00:00:01,500 Instructor: In the last section, 2 00:00:01,500 --> 00:00:03,330 we jumped through a whole bunch of different hoops. 3 00:00:03,330 --> 00:00:05,490 It was a really long section. 4 00:00:05,490 --> 00:00:09,690 We hooked up Redux Thunk, we imported Axios. 5 00:00:09,690 --> 00:00:13,080 We made a POST request, we formed our URL up. 6 00:00:13,080 --> 00:00:15,330 We were piping through the email and password. 7 00:00:15,330 --> 00:00:17,040 All this set up, all this set up. 8 00:00:17,040 --> 00:00:18,450 And then the final culmination, 9 00:00:18,450 --> 00:00:20,280 when we finally tried to POST our form, 10 00:00:20,280 --> 00:00:24,000 was a big, fat red error right here. 11 00:00:24,000 --> 00:00:28,860 Something about, no access control allow origin header. 12 00:00:28,860 --> 00:00:33,360 So, if you've ever worked on a web project yourself before, 13 00:00:33,360 --> 00:00:34,830 you may have seen this error message. 14 00:00:34,830 --> 00:00:36,660 It is certainly one of the more frustrating 15 00:00:36,660 --> 00:00:37,620 error messages out there, 16 00:00:37,620 --> 00:00:41,070 because this error is definitely not plain English. 17 00:00:41,070 --> 00:00:42,930 It is something where you really have to go 18 00:00:42,930 --> 00:00:44,670 and read on Google. 19 00:00:44,670 --> 00:00:46,260 You know, basically, just do a Google search for it 20 00:00:46,260 --> 00:00:48,240 and kind of figure out what's going on there. 21 00:00:48,240 --> 00:00:51,000 So, definitely a very frustrating error to get. 22 00:00:51,000 --> 00:00:52,770 Let's take some time to talk about 23 00:00:52,770 --> 00:00:55,470 exactly what this error message is talking about. 24 00:00:55,470 --> 00:00:57,330 And so, for a little bit here, 25 00:00:57,330 --> 00:00:59,250 for this section and probably the next one, 26 00:00:59,250 --> 00:01:01,500 we're going to take a little bit of a break 27 00:01:01,500 --> 00:01:04,830 from all the topics of Redux Thunk and authentication, 28 00:01:04,830 --> 00:01:05,663 all that kind of stuff. 29 00:01:05,663 --> 00:01:08,790 This is a total diversion, a total side topic. 30 00:01:08,790 --> 00:01:10,230 So, we're gonna bench this stuff, 31 00:01:10,230 --> 00:01:11,850 we're gonna talk about that error, 32 00:01:11,850 --> 00:01:13,800 and we're gonna come right back to this. 33 00:01:13,800 --> 00:01:17,400 Okay, so unrelated to this, Redux Thunks 34 00:01:17,400 --> 00:01:20,010 and all that kind of good authentication stuff. 35 00:01:20,010 --> 00:01:21,153 Total side topic. 36 00:01:22,830 --> 00:01:24,930 So, back in the browser, 37 00:01:24,930 --> 00:01:26,340 you know, I'm not gonna read the error back to you. 38 00:01:26,340 --> 00:01:28,080 I know you can read just as well as I can, 39 00:01:28,080 --> 00:01:30,600 but if you wanna pause the video and check it out, 40 00:01:30,600 --> 00:01:33,570 you're certainly welcome to. 41 00:01:33,570 --> 00:01:37,230 So, the error that we got is what is called a CORS error. 42 00:01:37,230 --> 00:01:41,520 And when I say CORS, CORS is an acronym. 43 00:01:41,520 --> 00:01:44,070 C O R S. 44 00:01:44,070 --> 00:01:46,980 CORS stands for Cross Origin Resource Sharing. 45 00:01:46,980 --> 00:01:49,140 And I might have gotten that slightly wrong. 46 00:01:49,140 --> 00:01:51,330 Feel free to correct me in the comments, if I did. 47 00:01:51,330 --> 00:01:53,910 I'm sure someone will. 48 00:01:53,910 --> 00:01:57,360 Anyways, CORS is a security protocol, 49 00:01:57,360 --> 00:01:59,970 or, kind of, a concept in security. 50 00:01:59,970 --> 00:02:03,720 The sole purpose of CORS is to protect users 51 00:02:03,720 --> 00:02:05,463 in a browser environment. 52 00:02:06,570 --> 00:02:07,830 Keeping, you know, keep that in mind, 53 00:02:07,830 --> 00:02:09,539 that is the sole purpose, that is what it does. 54 00:02:09,539 --> 00:02:11,640 It is there to protect users 55 00:02:11,640 --> 00:02:15,300 from people on malicious websites. 56 00:02:15,300 --> 00:02:18,780 So, CORS is a security protocol that looks 57 00:02:18,780 --> 00:02:22,020 at your current domain and port 58 00:02:22,020 --> 00:02:25,473 and attaches that to any AJAX request that is made. 59 00:02:27,030 --> 00:02:30,420 So, if I click on the request that we just made right here, 60 00:02:30,420 --> 00:02:32,583 and we look at request headers, 61 00:02:33,690 --> 00:02:36,420 we can see that we have a host and an origin, 62 00:02:36,420 --> 00:02:39,660 and, specifically, note how the origin includes both 63 00:02:39,660 --> 00:02:42,993 the current domain that we're on, localhost, and the port. 64 00:02:43,950 --> 00:02:48,950 The server can then inspect this domain and port, and say, 65 00:02:50,700 --> 00:02:54,780 if it is not the same port and domain and sub-domain 66 00:02:54,780 --> 00:02:56,160 that the server is running on, 67 00:02:56,160 --> 00:02:58,860 by default it's gonna say CORS error. 68 00:02:58,860 --> 00:03:02,460 In other words, I don't know exactly why 69 00:03:02,460 --> 00:03:05,010 you are making a request from this other, 70 00:03:05,010 --> 00:03:06,840 like, unknown domain. 71 00:03:06,840 --> 00:03:10,740 I only expect requests to come in from my current domain. 72 00:03:10,740 --> 00:03:12,270 And so that's, kind of, confusing English. 73 00:03:12,270 --> 00:03:14,270 Let's look at a diagram to help clarify. 74 00:03:16,650 --> 00:03:19,020 So, this diagram right here has two possible cases. 75 00:03:19,020 --> 00:03:21,000 The first one, the green case at the top 76 00:03:21,000 --> 00:03:24,060 is like every day normal AJAX requests. 77 00:03:24,060 --> 00:03:26,010 And the one at the bottom is something 78 00:03:26,010 --> 00:03:28,080 that would result in a CORS error. 79 00:03:28,080 --> 00:03:29,160 So, let's walk through this 80 00:03:29,160 --> 00:03:31,560 from a different perspective, a different angle. 81 00:03:32,490 --> 00:03:35,730 So, let's say that you are an engineer at google dot com, 82 00:03:35,730 --> 00:03:38,280 and you're making a web app that, at some point in time, 83 00:03:38,280 --> 00:03:40,950 needs to make an AJAX request. 84 00:03:40,950 --> 00:03:45,950 You are making a web app that is hosted on google dot com, 85 00:03:46,230 --> 00:03:48,600 so when a user is on your app, 86 00:03:48,600 --> 00:03:52,350 the URL is literally going to read google dot com, right? 87 00:03:52,350 --> 00:03:54,510 You know, that makes sense. 88 00:03:54,510 --> 00:03:57,330 Let's say that you are making an AJAX request 89 00:03:57,330 --> 00:04:01,113 to your backend server, which is hosted on google dot com. 90 00:04:02,070 --> 00:04:07,070 In this case, presumably the domain, sub-domain and port 91 00:04:07,770 --> 00:04:12,000 of the user's browser matches up exactly 92 00:04:12,000 --> 00:04:16,110 to the domain, sub-domain and port of the backend server. 93 00:04:16,110 --> 00:04:18,990 So, total match, you know, same, same domain, 94 00:04:18,990 --> 00:04:22,380 same port, same domain, same port on both sides. 95 00:04:22,380 --> 00:04:26,460 In that case, request is good, no issue with CORS. 96 00:04:26,460 --> 00:04:31,460 Where CORS comes into play, is when a user is on a website, 97 00:04:31,590 --> 00:04:33,390 like say google dot com, 98 00:04:33,390 --> 00:04:38,250 that tries to make an AJAX request to a different domain, 99 00:04:38,250 --> 00:04:42,180 a different sub-domain or a different port. 100 00:04:42,180 --> 00:04:44,430 Like, let's say they try to make an AJAX request 101 00:04:44,430 --> 00:04:46,170 to github dot com. 102 00:04:46,170 --> 00:04:48,630 In this case, the server would, 103 00:04:48,630 --> 00:04:52,530 can, optionally, reject the AJAX request, 104 00:04:52,530 --> 00:04:55,290 and say, this is a violation of CORS. 105 00:04:55,290 --> 00:04:58,560 And that is the exact error message that we just saw. 106 00:04:58,560 --> 00:05:01,650 So right now, inside of our application, 107 00:05:01,650 --> 00:05:04,350 we are on localhost 8080. 108 00:05:04,350 --> 00:05:08,583 So, our domain is localhost and our port is 8080. 109 00:05:10,050 --> 00:05:14,280 We tried making an AJAX request to domain localhost, 110 00:05:14,280 --> 00:05:18,790 but port 3090, that means that CORS 111 00:05:19,770 --> 00:05:21,360 all the sudden comes into play. 112 00:05:21,360 --> 00:05:25,230 We are making a request to a different port 113 00:05:25,230 --> 00:05:28,473 and that means that our request is subject to CORS. 114 00:05:29,370 --> 00:05:32,100 Now, the entire purpose of CORS in the first place, 115 00:05:32,100 --> 00:05:34,980 again, is just to protect users. 116 00:05:34,980 --> 00:05:36,090 That's all it's there for, 117 00:05:36,090 --> 00:05:39,360 is to protect users in their browser. 118 00:05:39,360 --> 00:05:42,210 So, if I go to like, let's say, 119 00:05:42,210 --> 00:05:47,210 you know, hacker website fake place dot com. 120 00:05:47,250 --> 00:05:49,740 Hopefully this doesn't actually, oh God, it's okay. 121 00:05:49,740 --> 00:05:50,940 No, not a website. 122 00:05:50,940 --> 00:05:52,080 Thank goodness. 123 00:05:52,080 --> 00:05:53,610 You never know what's gonna pop up, 124 00:05:53,610 --> 00:05:55,080 you know, when you put in a silly URL. 125 00:05:55,080 --> 00:05:57,750 Anyways, let's say I go to some hacker website, 126 00:05:57,750 --> 00:05:59,790 you know, some malicious website, 127 00:05:59,790 --> 00:06:03,180 and the code inside of malicious website right here, 128 00:06:03,180 --> 00:06:05,370 tries to make an AJAX request to, 129 00:06:05,370 --> 00:06:10,053 say, Wells Fargo dot com or Bank of America dot com. 130 00:06:11,220 --> 00:06:14,640 In that case, I would want to protect my user, 131 00:06:14,640 --> 00:06:16,470 you know, whoever might be, or whoever's 132 00:06:16,470 --> 00:06:18,360 coming to this place, 133 00:06:18,360 --> 00:06:20,790 I would want to somehow recognize 134 00:06:20,790 --> 00:06:24,090 that the source website, you know, the domain 135 00:06:24,090 --> 00:06:28,260 that the user is on, is not the same as my API server. 136 00:06:28,260 --> 00:06:30,420 You know, it's not a place that I actually trust. 137 00:06:30,420 --> 00:06:32,550 And so, that's where CORS comes into play. 138 00:06:32,550 --> 00:06:34,953 It is solely to protect users. 139 00:06:37,470 --> 00:06:38,610 So, you might be saying to yourself, 140 00:06:38,610 --> 00:06:40,350 well, Steven this doesn't make any sense. 141 00:06:40,350 --> 00:06:41,910 We've been making a ton of requests 142 00:06:41,910 --> 00:06:43,470 with Postman already, right? 143 00:06:43,470 --> 00:06:47,790 Like, why didn't we have any CORS issues over there? 144 00:06:47,790 --> 00:06:49,110 That's a great question. 145 00:06:49,110 --> 00:06:50,880 So, I've already got Postman loaded up, 146 00:06:50,880 --> 00:06:54,990 and remember Postman is all about making network requests. 147 00:06:54,990 --> 00:06:58,350 So, I've already got localhost 3090 in here, 148 00:06:58,350 --> 00:07:01,470 I'm using the signup route, it's a POST, 149 00:07:01,470 --> 00:07:03,810 and I've got my email and password in, 150 00:07:03,810 --> 00:07:06,120 and I can send the request, and okay, 151 00:07:06,120 --> 00:07:09,510 well, email is in use, but if I change the email. 152 00:07:09,510 --> 00:07:10,620 Boom, I get a token here. 153 00:07:10,620 --> 00:07:13,050 So, no CORS error, nothing like that. 154 00:07:13,050 --> 00:07:16,320 So, why did I get a CORS error in the browser, 155 00:07:16,320 --> 00:07:18,120 but not with Postman? 156 00:07:18,120 --> 00:07:22,110 And that again, again, is the reason for that 157 00:07:22,110 --> 00:07:26,670 is that CORS is solely security protection 158 00:07:26,670 --> 00:07:28,593 for users in a browser. 159 00:07:29,700 --> 00:07:32,400 To enforce CORS, your server is gonna look at, 160 00:07:32,400 --> 00:07:35,430 it's either the host or origin header 161 00:07:35,430 --> 00:07:36,960 on the request right here. 162 00:07:36,960 --> 00:07:40,260 And all headers on a request are very easily 163 00:07:40,260 --> 00:07:42,540 and trivially easy to fake. 164 00:07:42,540 --> 00:07:47,280 So, you can fake a header at any point in time. 165 00:07:47,280 --> 00:07:50,160 So, CORS doesn't really, you know, it's not there 166 00:07:50,160 --> 00:07:52,800 to protect people from maliciously trying 167 00:07:52,800 --> 00:07:54,630 to access your server. 168 00:07:54,630 --> 00:07:57,870 It is there to protect users who are inadvertently, 169 00:07:57,870 --> 00:08:00,873 or don't want to make an AJAX request to your server. 170 00:08:01,860 --> 00:08:05,850 Okay? So, long winded explanation, but at the end of the day 171 00:08:05,850 --> 00:08:08,460 purpose of CORS is just to protect users 172 00:08:08,460 --> 00:08:10,323 in a browser environment. 173 00:08:11,640 --> 00:08:14,820 If you've never interviewed for a JavaScript position 174 00:08:14,820 --> 00:08:17,160 before, by the way, like front end development, 175 00:08:17,160 --> 00:08:19,800 man, CORS is probably, like, one of the best, 176 00:08:19,800 --> 00:08:23,430 most common interview questions, I would say, out there. 177 00:08:23,430 --> 00:08:25,830 And so, if you're looking to do an interview 178 00:08:25,830 --> 00:08:27,660 anytime in the future, I highly recommend 179 00:08:27,660 --> 00:08:29,340 you do some more research into CORS. 180 00:08:29,340 --> 00:08:33,450 But you know, that's it in a nutshell. 181 00:08:33,450 --> 00:08:34,549 That's it, in summary. 182 00:08:35,429 --> 00:08:38,190 So, with better understanding of exactly what CORS is, 183 00:08:38,190 --> 00:08:41,789 how in the world do we, you know, how do we solve this? 184 00:08:41,789 --> 00:08:42,960 So, I bet if you've ever gotten 185 00:08:42,960 --> 00:08:44,550 this error message right here before, 186 00:08:44,550 --> 00:08:45,840 you know, something that says, you know, 187 00:08:45,840 --> 00:08:47,550 the no access control origin. 188 00:08:47,550 --> 00:08:49,350 Okay, you probably Googled the error. 189 00:08:49,350 --> 00:08:52,230 You read about CORS and then probably the very next 190 00:08:52,230 --> 00:08:57,230 search you did was JavaScript AJAX request circumvent CORS, 191 00:08:59,130 --> 00:09:02,160 or bypass CORS, or you know, something like that, right? 192 00:09:02,160 --> 00:09:04,740 That's probably the very next Google search you did. 193 00:09:04,740 --> 00:09:05,940 How do we get around CORS? 194 00:09:05,940 --> 00:09:07,800 How do we resolve this error? 195 00:09:07,800 --> 00:09:10,470 So, let's talk about how we do that resolution 196 00:09:10,470 --> 00:09:12,090 inside the next section. 197 00:09:12,090 --> 00:09:13,140 I'll catch you there.