1 00:00:00,990 --> 00:00:01,823 Instructor: In the last section, 2 00:00:01,823 --> 00:00:03,750 we spoke about why we were seeing that error message 3 00:00:03,750 --> 00:00:06,689 and we spoke about CORS requests in great detail. 4 00:00:06,689 --> 00:00:08,520 So in this section, we're gonna make a small change 5 00:00:08,520 --> 00:00:10,560 to our application that's going to allow us to 6 00:00:10,560 --> 00:00:13,650 make a request from localhost 3000 7 00:00:13,650 --> 00:00:17,193 over to our backend API hosted at localhost 3090. 8 00:00:18,180 --> 00:00:20,370 Now, in order to solve this issue, 9 00:00:20,370 --> 00:00:21,540 we're going to make a change 10 00:00:21,540 --> 00:00:24,720 to the configuration of our API. 11 00:00:24,720 --> 00:00:27,750 So, all this stuff, remember when I repeated 12 00:00:27,750 --> 00:00:29,340 probably more times you wanted to hear, 13 00:00:29,340 --> 00:00:32,340 all this security stuff is hard coded into our browser 14 00:00:32,340 --> 00:00:35,580 and we have no way to try to get our browser to say, 15 00:00:35,580 --> 00:00:37,830 oh yeah, you know what, don't worry about that CORS stuff. 16 00:00:37,830 --> 00:00:39,210 We'll just do our best. 17 00:00:39,210 --> 00:00:42,540 So, the browser is always gonna do this security step. 18 00:00:42,540 --> 00:00:44,520 Nothing we can do to stop it. 19 00:00:44,520 --> 00:00:46,470 So, to make our application work, 20 00:00:46,470 --> 00:00:49,710 we're gonna change the way that our backend API 21 00:00:49,710 --> 00:00:53,040 views this cross origin request. 22 00:00:53,040 --> 00:00:55,410 So rather than making our backend API say, 23 00:00:55,410 --> 00:00:56,880 hey, you know what, it's only okay 24 00:00:56,880 --> 00:00:59,520 if you make this request from my bank dot com. 25 00:00:59,520 --> 00:01:02,550 We're gonna change our backend API to instead say, 26 00:01:02,550 --> 00:01:07,550 hi browser, you can make this request from anywhere. 27 00:01:09,030 --> 00:01:10,740 So now, when we try to do our request 28 00:01:10,740 --> 00:01:12,240 over to localhost 3090, 29 00:01:12,240 --> 00:01:14,220 which is where our application is hosted 30 00:01:14,220 --> 00:01:15,900 or the API is hosted, 31 00:01:15,900 --> 00:01:19,110 we're still going to do this step inside the browser 32 00:01:19,110 --> 00:01:22,200 where the browser says, hey API, can I make this request? 33 00:01:22,200 --> 00:01:25,440 But now, the backend API is going to respond and say, 34 00:01:25,440 --> 00:01:28,620 oh yeah, sure, localhost 3000, no problem. 35 00:01:28,620 --> 00:01:29,700 Don't sweat it. 36 00:01:29,700 --> 00:01:31,860 You can make a request from there. 37 00:01:31,860 --> 00:01:34,560 And so now, our browser is going to say 38 00:01:34,560 --> 00:01:37,440 back to our JavaScript code, sounds great. 39 00:01:37,440 --> 00:01:41,947 You can make the request over to that different port 40 00:01:43,230 --> 00:01:45,450 and then our request is going to succeed. 41 00:01:45,450 --> 00:01:47,400 So, to solve all this CORS stuff, 42 00:01:47,400 --> 00:01:50,730 it really comes down to our server configuration. 43 00:01:50,730 --> 00:01:52,833 That's how we fix CORS errors. 44 00:01:53,670 --> 00:01:55,470 So, with that in mind, let's get to it. 45 00:01:55,470 --> 00:01:59,400 To enable CORS requests on our backend API, real simple, 46 00:01:59,400 --> 00:02:02,520 straightforward configuration step we have to do. 47 00:02:02,520 --> 00:02:04,800 I'm gonna first flip back over to my terminal 48 00:02:04,800 --> 00:02:07,110 where I have my API running. 49 00:02:07,110 --> 00:02:08,823 I'm gonna kill my API. 50 00:02:09,990 --> 00:02:11,670 I'm gonna start up my code editor 51 00:02:11,670 --> 00:02:13,353 inside that server directory. 52 00:02:14,520 --> 00:02:16,920 And then finally, back inside the terminal, 53 00:02:16,920 --> 00:02:21,720 I'm going to add one tiny package to the server folder. 54 00:02:21,720 --> 00:02:23,700 So again, this is a module that we're going to install 55 00:02:23,700 --> 00:02:26,610 into our server side project. 56 00:02:26,610 --> 00:02:31,610 So, I'm going to run NPM install dash dash save CORS. 57 00:02:31,740 --> 00:02:33,360 So, the module we want to install, 58 00:02:33,360 --> 00:02:35,400 CORS, that's all it's called. 59 00:02:35,400 --> 00:02:36,990 So, go ahead and install that. 60 00:02:36,990 --> 00:02:38,820 I've already installed it myself, 61 00:02:38,820 --> 00:02:41,910 just to keep you from having to wait and watch it install. 62 00:02:41,910 --> 00:02:45,690 And then once it's installed, I will open up my code editor 63 00:02:45,690 --> 00:02:48,723 and I'm going to open up my index dot JS file. 64 00:02:49,950 --> 00:02:53,490 So, inside of here, we're going to import that CORS module 65 00:02:53,490 --> 00:02:54,693 that we just installed. 66 00:02:55,680 --> 00:02:59,223 So, I'll say const CORS is require CORS, 67 00:03:00,210 --> 00:03:03,510 and then I'm going to wire it up to my express application 68 00:03:03,510 --> 00:03:06,003 in this app setup section down here. 69 00:03:07,320 --> 00:03:08,400 And so inside of here, 70 00:03:08,400 --> 00:03:13,113 I'll add on app dot use CORS, like so. 71 00:03:14,250 --> 00:03:17,940 So, this is the default use of the CORS module. 72 00:03:17,940 --> 00:03:20,010 When we wire it up to our express application, 73 00:03:20,010 --> 00:03:22,080 it's gonna make our express application say, 74 00:03:22,080 --> 00:03:25,530 oh yeah, hey request from any URL in the world, 75 00:03:25,530 --> 00:03:28,440 don't worry about it, totally fine. 76 00:03:28,440 --> 00:03:31,830 We can, optionally, further configure CORS to say, 77 00:03:31,830 --> 00:03:35,280 only accept requests coming from localhost 3000 78 00:03:35,280 --> 00:03:38,460 or from any specific sub-domain, domain, or port 79 00:03:38,460 --> 00:03:39,840 if we want to. 80 00:03:39,840 --> 00:03:41,490 But in our case, we're just putting together 81 00:03:41,490 --> 00:03:44,280 a very simple development application here. 82 00:03:44,280 --> 00:03:45,660 So, we're just going to allow requests 83 00:03:45,660 --> 00:03:47,373 to come in from anywhere. 84 00:03:48,810 --> 00:03:50,610 So now, I'm gonna save this file. 85 00:03:50,610 --> 00:03:52,590 I'll flip back over to my terminal 86 00:03:52,590 --> 00:03:55,593 and start my server back up with NPM run dev. 87 00:03:59,580 --> 00:04:02,940 So, there's our server running, 88 00:04:02,940 --> 00:04:04,713 server listening on port 3090. 89 00:04:05,610 --> 00:04:08,760 I'm now gonna flip back over to our React application. 90 00:04:08,760 --> 00:04:10,800 I don't have to do any refresh over here 91 00:04:10,800 --> 00:04:12,300 or anything like that because, again, 92 00:04:12,300 --> 00:04:16,110 this is strictly a server side restriction. 93 00:04:16,110 --> 00:04:17,850 I am going to clear my console. 94 00:04:17,850 --> 00:04:19,769 I'm gonna clear my request log 95 00:04:19,769 --> 00:04:22,290 and then I will submit my form again. 96 00:04:22,290 --> 00:04:26,040 And now, I will see that I was able to successfully sign up 97 00:04:26,040 --> 00:04:29,520 with a POST request over to our backend API. 98 00:04:29,520 --> 00:04:32,389 Awesome. So now, if we inspect this request, 99 00:04:32,389 --> 00:04:36,420 I can go to the preview tab and I'll see my JSON web token 100 00:04:36,420 --> 00:04:38,400 on the token property. 101 00:04:38,400 --> 00:04:40,110 Just what we expected. 102 00:04:40,110 --> 00:04:42,420 Okay, so in this section we fixed up that CORS error 103 00:04:42,420 --> 00:04:45,690 by doing a little bit of configuration on the server side. 104 00:04:45,690 --> 00:04:47,100 Again, I can't say it enough. 105 00:04:47,100 --> 00:04:50,100 Remember the CORS restriction is implemented 106 00:04:50,100 --> 00:04:51,180 by your browser, 107 00:04:51,180 --> 00:04:54,810 and there's very specifically nothing you can do 108 00:04:54,810 --> 00:04:57,360 as a developer to circumvent that restriction 109 00:04:57,360 --> 00:05:00,780 because it is specifically made to restrict you 110 00:05:00,780 --> 00:05:03,090 from making requests to other domains. 111 00:05:03,090 --> 00:05:05,160 So, we have to configure our server 112 00:05:05,160 --> 00:05:08,160 to allow requests to come in from these other domains 113 00:05:08,160 --> 00:05:11,550 or ports or sub-domains or whatever it may be. 114 00:05:11,550 --> 00:05:13,500 Okay, so now that we've got our token 115 00:05:13,500 --> 00:05:15,900 and we've successfully signed up to our application 116 00:05:15,900 --> 00:05:17,520 let's take a quick break right here, 117 00:05:17,520 --> 00:05:18,900 and we'll continue in the next section 118 00:05:18,900 --> 00:05:21,570 by figuring out what we want to do with this token 119 00:05:21,570 --> 00:05:23,820 inside of our client side app. 120 00:05:23,820 --> 00:05:26,320 So, quick break and I'll see you in just a minute.