1 00:00:00,810 --> 00:00:02,430 -: In the last section, we spoke a whole bunch 2 00:00:02,430 --> 00:00:03,900 about the error message that we got 3 00:00:03,900 --> 00:00:06,810 regarding CORS access to our API server. 4 00:00:06,810 --> 00:00:08,670 Remember, CORS is something that comes up 5 00:00:08,670 --> 00:00:12,210 whenever our domain, subdomain, or port changes, 6 00:00:12,210 --> 00:00:13,710 which is absolutely the case here. 7 00:00:13,710 --> 00:00:15,360 We're currently on port 8080, 8 00:00:15,360 --> 00:00:19,230 and we're trying to access a server on port 3090. 9 00:00:19,230 --> 00:00:21,180 So in this section we're going to 10 00:00:21,180 --> 00:00:23,370 fix up this CORS issue a little bit. 11 00:00:23,370 --> 00:00:25,710 As I mentioned in the last section, 12 00:00:25,710 --> 00:00:27,990 CORS is something that is not easily or at all 13 00:00:27,990 --> 00:00:30,300 circumvented on the client's side alone. 14 00:00:30,300 --> 00:00:33,630 So there's not some magic switch in the browser 15 00:00:33,630 --> 00:00:34,807 where you can magically say, 16 00:00:34,807 --> 00:00:37,770 "Hey, just ignore CORS for all time," right? 17 00:00:37,770 --> 00:00:40,290 Again, CORS is here to protect users 18 00:00:40,290 --> 00:00:42,270 who are in a browser environment, 19 00:00:42,270 --> 00:00:44,270 so there's no easy way to circumvent it. 20 00:00:45,480 --> 00:00:46,740 So to fix this CORS issue, 21 00:00:46,740 --> 00:00:49,140 we're actually gonna change our server. 22 00:00:49,140 --> 00:00:51,150 We're gonna tell our server to allow connections 23 00:00:51,150 --> 00:00:54,270 from any port, any domain, any subdomain, 24 00:00:54,270 --> 00:00:57,420 and just handle them without a care in the world. 25 00:00:57,420 --> 00:01:01,200 This is a very common approach for API servers of all types. 26 00:01:01,200 --> 00:01:02,550 With any API server, 27 00:01:02,550 --> 00:01:04,200 the expectation is that people 28 00:01:04,200 --> 00:01:05,610 from anywhere on the internet 29 00:01:05,610 --> 00:01:07,410 should be able to access your server, 30 00:01:07,410 --> 00:01:10,060 unless, you know, you wanna limit it for some reason. 31 00:01:10,950 --> 00:01:12,240 So let's get started. 32 00:01:12,240 --> 00:01:14,550 Again, our goal here is to 33 00:01:14,550 --> 00:01:17,370 enable our API server for CORS requests. 34 00:01:17,370 --> 00:01:19,560 In practice, it's gonna be pretty darn easy. 35 00:01:19,560 --> 00:01:20,733 Pretty straightforward. 36 00:01:21,660 --> 00:01:23,850 So over in my terminal, 37 00:01:23,850 --> 00:01:26,310 I'm in my server window right here. 38 00:01:26,310 --> 00:01:28,740 So I still have my client going over here 39 00:01:28,740 --> 00:01:30,450 that's serving the JavaScript application. 40 00:01:30,450 --> 00:01:32,490 So this is Webpack over here. 41 00:01:32,490 --> 00:01:34,170 I'm gonna go back over to my process 42 00:01:34,170 --> 00:01:35,790 that's currently running my server 43 00:01:35,790 --> 00:01:37,140 and I'm just gonna kill it. 44 00:01:38,520 --> 00:01:40,020 Now we're going to install a package 45 00:01:40,020 --> 00:01:42,450 that's going to help us enable CORS. 46 00:01:42,450 --> 00:01:47,040 To do so I will npm install and save cors. 47 00:01:48,720 --> 00:01:52,083 A pretty aptly-named project, you might say. 48 00:01:53,520 --> 00:01:57,900 So it's a very small, very small install here. 49 00:01:57,900 --> 00:01:58,890 Very quick. 50 00:01:58,890 --> 00:02:00,090 Once it's installed, 51 00:02:00,090 --> 00:02:03,993 we can start our server back up again with npm run dev. 52 00:02:08,610 --> 00:02:10,199 Cool, we got it back up. 53 00:02:10,199 --> 00:02:13,863 Now I'm gonna open a code editor for my server. 54 00:02:19,920 --> 00:02:24,540 And inside of my top-level index.js file. 55 00:02:24,540 --> 00:02:27,090 So here's my top-level index.js. 56 00:02:27,090 --> 00:02:32,090 Inside of here, we're going to require in the CORS module. 57 00:02:33,750 --> 00:02:35,880 So we just required in CORS. 58 00:02:35,880 --> 00:02:39,120 And now to enable CORS for all use cases 59 00:02:39,120 --> 00:02:41,070 across our entire application, 60 00:02:41,070 --> 00:02:44,433 we can tell our application to use CORS. 61 00:02:45,870 --> 00:02:48,113 And we're going to make sure to invoke CORS. 62 00:02:48,113 --> 00:02:50,790 So CORS gets its own parentheses here. 63 00:02:50,790 --> 00:02:53,340 Oh, and make sure we spell use right. 64 00:02:53,340 --> 00:02:55,440 Cool. So what's going on here? 65 00:02:55,440 --> 00:02:56,640 CORS is a middleware. 66 00:02:56,640 --> 00:02:58,590 Remember talking about middlewares a little bit? 67 00:02:58,590 --> 00:03:01,560 Not on the Redux side, but on the express side. 68 00:03:01,560 --> 00:03:03,990 We had already set up an express middleware 69 00:03:03,990 --> 00:03:05,610 to handle authentication. 70 00:03:05,610 --> 00:03:07,080 This is another middleware that is 71 00:03:07,080 --> 00:03:09,450 specifically going to handle CORS. 72 00:03:09,450 --> 00:03:11,407 And in this case, this middleware is gonna say, 73 00:03:11,407 --> 00:03:13,687 "Hey, is this request coming from a different port, 74 00:03:13,687 --> 00:03:15,607 "different domain, different subdomain? 75 00:03:15,607 --> 00:03:17,677 "Okay, that's fine. You know, let's let it through. 76 00:03:17,677 --> 00:03:19,357 "Don't throw any type of error. 77 00:03:19,357 --> 00:03:23,167 "Don't throw an error back to whoever's making the request 78 00:03:23,167 --> 00:03:25,890 "and tell them that they're violating CORS principle here." 79 00:03:25,890 --> 00:03:27,930 So that's all this middleware is doing. 80 00:03:27,930 --> 00:03:28,980 The CORS middleware, 81 00:03:28,980 --> 00:03:31,080 you can also look up some documentation on it, 82 00:03:31,080 --> 00:03:34,650 and if you so chose, you can pass it a set of options here 83 00:03:34,650 --> 00:03:37,657 to say, "Hey, only let in CORS requests coming from, 84 00:03:37,657 --> 00:03:39,960 "say, some very specific domain." 85 00:03:39,960 --> 00:03:41,010 And so that might be something 86 00:03:41,010 --> 00:03:42,030 that you'd be interested in here. 87 00:03:42,030 --> 00:03:43,920 You know, perhaps you don't want to open your API 88 00:03:43,920 --> 00:03:45,180 to the entire world. 89 00:03:45,180 --> 00:03:46,650 Maybe you want to just open it up 90 00:03:46,650 --> 00:03:48,900 to one very particular domain. 91 00:03:48,900 --> 00:03:52,080 And so that'd be the place to specify that configuration, 92 00:03:52,080 --> 00:03:52,913 right here. 93 00:03:54,360 --> 00:03:56,910 While we're in our server, this is gonna, 94 00:03:56,910 --> 00:03:58,410 so this is gonna take care of the CORS issue. 95 00:03:58,410 --> 00:04:00,210 While we're in our server, I wanna make 96 00:04:00,210 --> 00:04:05,010 one other very small change over in our router. 97 00:04:05,010 --> 00:04:06,600 So here's our router file. 98 00:04:06,600 --> 00:04:09,000 Again, the router for our server. 99 00:04:09,000 --> 00:04:10,890 When we had put together a server originally, 100 00:04:10,890 --> 00:04:13,338 we put in, under the root route, res.send, 101 00:04:13,338 --> 00:04:16,380 and then we just sent back hi: 'there', 102 00:04:16,380 --> 00:04:18,870 which wasn't super useful. 103 00:04:18,870 --> 00:04:20,820 Just to make our client-side application 104 00:04:20,820 --> 00:04:22,230 make a little bit more sense, 105 00:04:22,230 --> 00:04:27,230 I wanna change this res.send from hi: 'there' to message, 106 00:04:27,810 --> 00:04:30,937 and we're gonna send back a string that says 107 00:04:30,937 --> 00:04:35,937 "Super secret code is ABC123," like so. 108 00:04:38,160 --> 00:04:40,740 Again, just doing this to make the client side stuff 109 00:04:40,740 --> 00:04:42,570 a little bit more reasonable. 110 00:04:42,570 --> 00:04:44,070 You know, when we eventually finish up 111 00:04:44,070 --> 00:04:45,570 the client side-authentication, 112 00:04:45,570 --> 00:04:48,330 we're going to want to make a authenticated request 113 00:04:48,330 --> 00:04:49,680 just to test out everything, you know, 114 00:04:49,680 --> 00:04:51,870 make sure everything's working a-okay, 115 00:04:51,870 --> 00:04:54,060 and it makes a little bit more sense to get back 116 00:04:54,060 --> 00:04:56,220 some JSON that contains a property 'message' 117 00:04:56,220 --> 00:04:59,490 as opposed to some JSON that contains the property 'hi.' 118 00:04:59,490 --> 00:05:02,700 So, you know, again, just something to make, down the line, 119 00:05:02,700 --> 00:05:05,430 make things make a little bit more sense. 120 00:05:05,430 --> 00:05:07,500 Okay, so that's our server. 121 00:05:07,500 --> 00:05:08,400 Let's verify. 122 00:05:08,400 --> 00:05:11,040 Yep, it looks like the server restarted successfully. 123 00:05:11,040 --> 00:05:13,980 I don't have any syntax errors or anything like that. 124 00:05:13,980 --> 00:05:16,560 Our server should now be allowing CORS requests. 125 00:05:16,560 --> 00:05:18,660 So let's flip back over to the browser, 126 00:05:18,660 --> 00:05:21,300 and we shouldn't have to refresh anything over here 127 00:05:21,300 --> 00:05:23,100 'cause our server is already restarted. 128 00:05:23,100 --> 00:05:25,890 All we should have to do is click the sign in button again 129 00:05:25,890 --> 00:05:28,470 and make sure that we don't get another error here. 130 00:05:28,470 --> 00:05:31,500 So I'm going to clear my log here, 131 00:05:31,500 --> 00:05:34,050 click sign in, and hot dog. 132 00:05:34,050 --> 00:05:37,050 It looks like we first got an options request here. 133 00:05:37,050 --> 00:05:39,060 An options request is something that is issued 134 00:05:39,060 --> 00:05:41,610 whenever CORS comes into play. 135 00:05:41,610 --> 00:05:43,080 And then we have this follow up request 136 00:05:43,080 --> 00:05:45,120 which is the actual request we're trying to make. 137 00:05:45,120 --> 00:05:48,990 It's a POST request, and it looks like the response 138 00:05:48,990 --> 00:05:52,140 does in fact contain a token, which is exactly what we need. 139 00:05:52,140 --> 00:05:54,270 So it looks like on the client side, 140 00:05:54,270 --> 00:05:57,090 we now have the ability to kind of reasonably somewhat 141 00:05:57,090 --> 00:06:00,003 log into our application, which is exactly what we need. 142 00:06:00,840 --> 00:06:02,490 So there's still a lot of work to do here. 143 00:06:02,490 --> 00:06:04,710 You know, like I said, we still need to 144 00:06:04,710 --> 00:06:07,230 navigate the user when they successfully sign in. 145 00:06:07,230 --> 00:06:09,330 We need to save this token. 146 00:06:09,330 --> 00:06:10,740 We need to handle error cases. 147 00:06:10,740 --> 00:06:13,650 So still a hefty amount of work to go on here. 148 00:06:13,650 --> 00:06:15,633 Let's get to that in the next section.