1 00:00:00,120 --> 00:00:03,310 ‫So API gateway supports the browser security, 2 00:00:03,310 --> 00:00:05,090 ‫Cross-Origin Resource Sharing. 3 00:00:05,090 --> 00:00:08,010 ‫So CORS must be enabled if you want to be able 4 00:00:08,010 --> 00:00:11,120 ‫to receive API calls from another domain. 5 00:00:11,120 --> 00:00:13,890 ‫So for this API gateway works without an, 6 00:00:13,890 --> 00:00:16,630 ‫we create an options pre-flight request. 7 00:00:16,630 --> 00:00:19,130 ‫And then this contains the following CORS headers, 8 00:00:19,130 --> 00:00:21,150 ‫Access-Control-Allow-Methods, 9 00:00:21,150 --> 00:00:24,110 ‫Access-Control-Allow-Headers, Allow Origins. 10 00:00:24,110 --> 00:00:26,770 ‫And so these methods can be set from the console. 11 00:00:26,770 --> 00:00:28,550 ‫So we'll be seeing how we can do this. 12 00:00:28,550 --> 00:00:30,430 ‫And so to summarize how CORS are, 13 00:00:30,430 --> 00:00:33,600 ‫and how they work, here is a very concrete example. 14 00:00:33,600 --> 00:00:36,560 ‫So our web browser goes to our S3 bucket, 15 00:00:36,560 --> 00:00:38,720 ‫to get our static website content, 16 00:00:38,720 --> 00:00:42,490 ‫which is at example.com, www.example.com 17 00:00:42,490 --> 00:00:45,400 ‫and the JavaScript that we've launched, 18 00:00:45,400 --> 00:00:48,480 ‫and launched from the S3 bucket is asking us 19 00:00:48,480 --> 00:00:53,370 ‫to make API calls into our cross origin api.example.com. 20 00:00:53,370 --> 00:00:55,870 ‫So as such our web browser as a security, 21 00:00:55,870 --> 00:00:58,110 ‫we'll make an options preflight request 22 00:00:58,110 --> 00:01:00,240 ‫into our API gateway. 23 00:01:00,240 --> 00:01:03,080 ‫Then our API gateway will give us a preflight response, 24 00:01:03,080 --> 00:01:07,990 ‫if the origin is allowed to make a cross origin request. 25 00:01:07,990 --> 00:01:10,000 ‫And finally, if everything goes well, 26 00:01:10,000 --> 00:01:12,600 ‫then the web browser and the API gateway 27 00:01:12,600 --> 00:01:14,300 ‫can talk to one another. 28 00:01:14,300 --> 00:01:17,630 ‫So let's go in the console to see how we can set this up. 29 00:01:17,630 --> 00:01:20,390 ‫So let's demo cross-origin resource sharing, 30 00:01:20,390 --> 00:01:23,940 ‫by first creating a website in Amazon S3. 31 00:01:23,940 --> 00:01:25,530 ‫So I'm going to create a website, I'll call it 32 00:01:25,530 --> 00:01:29,020 ‫stephane-demo-cors-apigateway. 33 00:01:29,020 --> 00:01:32,090 ‫And it will create this in the same region I'm in right now. 34 00:01:32,090 --> 00:01:34,060 ‫So London, it doesn't really matter. 35 00:01:34,060 --> 00:01:36,820 ‫And I will go ahead and unlock the public access, 36 00:01:36,820 --> 00:01:39,280 ‫because I want to be able to access this as a website. 37 00:01:39,280 --> 00:01:41,890 ‫Yes, I acknowledge that everything will be good. 38 00:01:41,890 --> 00:01:43,910 ‫And I'll create these buckets. 39 00:01:43,910 --> 00:01:46,440 ‫I need to go now to my API gateway buckets. 40 00:01:46,440 --> 00:01:48,120 ‫So I will go into it. 41 00:01:48,120 --> 00:01:50,300 ‫And I will upload an index HTML file 42 00:01:50,300 --> 00:01:51,710 ‫that we'll show you in a second. 43 00:01:51,710 --> 00:01:55,750 ‫But first, I need to enable this bucket as a website. 44 00:01:55,750 --> 00:01:58,510 ‫So we'll click on this, get say yes, 45 00:01:58,510 --> 00:02:00,050 ‫I want this bucket to be a website. 46 00:02:00,050 --> 00:02:03,210 ‫I want you to load index.html, 47 00:02:03,210 --> 00:02:04,940 ‫and then click on save. 48 00:02:04,940 --> 00:02:07,140 ‫So this is going to be the endpoint, 49 00:02:07,140 --> 00:02:09,910 ‫I'm going to access my website in. 50 00:02:09,910 --> 00:02:10,840 ‫But currently I can't. 51 00:02:10,840 --> 00:02:12,890 ‫So if I try to access this endpoint, 52 00:02:12,890 --> 00:02:14,260 ‫I get a 403 Forbidden, 53 00:02:14,260 --> 00:02:16,340 ‫because I need to make my bucket public. 54 00:02:16,340 --> 00:02:20,040 ‫And so for doing so, we need to go to the bucket policy. 55 00:02:20,040 --> 00:02:22,310 ‫And I'm going to go to the documentation. 56 00:02:22,310 --> 00:02:25,470 ‫And here there should be a simple policy 57 00:02:25,470 --> 00:02:28,470 ‫for making my bucket public. 58 00:02:28,470 --> 00:02:32,090 ‫So here I will say, here I will scroll down, 59 00:02:32,090 --> 00:02:34,920 ‫and will allow public read on everything, for get objects. 60 00:02:34,920 --> 00:02:38,000 ‫So I will copy this entire policy, 61 00:02:38,000 --> 00:02:40,290 ‫which should make my bucket public. 62 00:02:40,290 --> 00:02:42,640 ‫I just have to change the example buckets 63 00:02:42,640 --> 00:02:44,867 ‫by the name of my bucket here. 64 00:02:44,867 --> 00:02:47,170 ‫Okay, here we go. 65 00:02:47,170 --> 00:02:49,970 ‫So now, this bucket has public access. 66 00:02:49,970 --> 00:02:52,070 ‫And so if I refresh this page, 67 00:02:52,070 --> 00:02:53,840 ‫I get a 404 Not Found, 68 00:02:53,840 --> 00:02:56,324 ‫because I haven't uploaded yet an index.html 69 00:02:56,324 --> 00:02:58,330 ‫So I'm going to do this right now. 70 00:02:58,330 --> 00:03:00,910 ‫So let's go into my API gateway code, 71 00:03:00,910 --> 00:03:02,660 ‫and have an index.html 72 00:03:02,660 --> 00:03:05,100 ‫So this is a very simple HTML file, 73 00:03:05,100 --> 00:03:07,610 ‫pretty much the same we used in the S3 section, 74 00:03:07,610 --> 00:03:12,130 ‫and in here is going to fetch something from my API gateway. 75 00:03:12,130 --> 00:03:15,480 ‫So what I want it to fetch is if I go to my API gateway, 76 00:03:15,480 --> 00:03:16,670 ‫and I go to my stages, 77 00:03:16,670 --> 00:03:18,590 ‫and I go to my prod stage, 78 00:03:18,590 --> 00:03:22,690 ‫I want it to fetch something from, for example, the houses. 79 00:03:22,690 --> 00:03:24,970 ‫So I'll take these houses right here. 80 00:03:24,970 --> 00:03:27,490 ‫And this works, hello from my pretty houses. 81 00:03:27,490 --> 00:03:32,180 ‫So I want my S3 website to get something from this URL. 82 00:03:32,180 --> 00:03:35,070 ‫So I'm going to copy this entire URL right here. 83 00:03:35,070 --> 00:03:36,750 ‫And you should do the same if you're trying 84 00:03:36,750 --> 00:03:38,730 ‫to go with the hands on with me. 85 00:03:38,730 --> 00:03:40,030 ‫And sorry, this is actually not what I wanted. 86 00:03:40,030 --> 00:03:42,280 ‫I wanted to change the to do in here. 87 00:03:42,280 --> 00:03:44,490 ‫So I want to fetch this URL, sorry, 88 00:03:44,490 --> 00:03:46,410 ‫I don't want to change this line, please. 89 00:03:46,410 --> 00:03:49,400 ‫And then the response will be having some text, 90 00:03:49,400 --> 00:03:50,690 ‫we will extract the text, 91 00:03:50,690 --> 00:03:54,160 ‫and then we will pass it to our HTML. 92 00:03:54,160 --> 00:03:57,650 ‫So let's upload this index at HTML in here, 93 00:03:57,650 --> 00:03:59,570 ‫and see what is going to happen. 94 00:03:59,570 --> 00:04:04,100 ‫So I'm uploading my code from API gateway, 95 00:04:04,100 --> 00:04:07,250 ‫index.html, upload. 96 00:04:07,250 --> 00:04:10,230 ‫And I'm going to enable the Chrome Developer Tools. 97 00:04:10,230 --> 00:04:12,860 ‫So more tools, and then developer tools 98 00:04:12,860 --> 00:04:14,458 ‫to see what's going on. 99 00:04:14,458 --> 00:04:15,291 ‫Here we go. 100 00:04:15,291 --> 00:04:16,370 ‫So I'm enabled with the tools, 101 00:04:16,370 --> 00:04:18,509 ‫and essentially in this page 102 00:04:18,509 --> 00:04:21,037 ‫that I want my developer tools to be. 103 00:04:21,037 --> 00:04:22,640 ‫And I'm going to refresh this page. 104 00:04:22,640 --> 00:04:25,120 ‫I'm going to go to console, refresh this page 105 00:04:25,120 --> 00:04:25,990 ‫and see what happens. 106 00:04:25,990 --> 00:04:28,460 ‫So let's go, refresh it. 107 00:04:28,460 --> 00:04:31,570 ‫And it says making a CORS request to the API gateway. 108 00:04:31,570 --> 00:04:33,290 ‫But it doesn't show anything. 109 00:04:33,290 --> 00:04:35,480 ‫Whereas we know that this API is working 110 00:04:35,480 --> 00:04:38,590 ‫because it responds, hello from my pretty houses. 111 00:04:38,590 --> 00:04:40,540 ‫So back in this web page, 112 00:04:40,540 --> 00:04:41,970 ‫if we look at the console, 113 00:04:41,970 --> 00:04:45,720 ‫it says access to fetch this address, 114 00:04:45,720 --> 00:04:48,240 ‫or not on my API gateway from this origin 115 00:04:48,240 --> 00:04:50,850 ‫has been blocked by CORS policy. 116 00:04:50,850 --> 00:04:52,870 ‫No access-control-allow-origin header 117 00:04:52,870 --> 00:04:55,130 ‫is present on the requested resource. 118 00:04:55,130 --> 00:04:57,520 ‫So this is because we haven't configured CORS yet 119 00:04:57,520 --> 00:04:59,040 ‫on our API gateway. 120 00:04:59,040 --> 00:05:00,500 ‫So we're going to do this now. 121 00:05:00,500 --> 00:05:02,620 ‫We go back into our resources. 122 00:05:02,620 --> 00:05:04,740 ‫And we go to the houses. 123 00:05:04,740 --> 00:05:06,700 ‫This is where we want to allow CORS. 124 00:05:06,700 --> 00:05:09,470 ‫And I'll do action, enable CORS. 125 00:05:09,470 --> 00:05:12,610 ‫And here I'm greeted with what I should enable CORS on. 126 00:05:12,610 --> 00:05:13,630 ‫So I'm going to say yes, 127 00:05:13,630 --> 00:05:16,240 ‫I want you to allow gets and options. 128 00:05:16,240 --> 00:05:18,260 ‫And these methods are great. 129 00:05:18,260 --> 00:05:21,600 ‫And the headers are such, so I'll leave it as is. 130 00:05:21,600 --> 00:05:23,020 ‫But this is what I need to change. 131 00:05:23,020 --> 00:05:25,500 ‫So the access control allow origin, 132 00:05:25,500 --> 00:05:27,250 ‫if I leave it as a star, 133 00:05:27,250 --> 00:05:29,960 ‫for sure it's going to work for any domain. 134 00:05:29,960 --> 00:05:32,660 ‫But I could also go ahead and enter the domain 135 00:05:32,660 --> 00:05:33,890 ‫of my websites. 136 00:05:33,890 --> 00:05:38,010 ‫So I could enter this entire domain here, in there. 137 00:05:38,010 --> 00:05:39,920 ‫So you can do this way as well. 138 00:05:39,920 --> 00:05:42,940 ‫So either a star or put the entire domain 139 00:05:42,940 --> 00:05:45,580 ‫and because I'm picky, I'm going to use the entire domain, 140 00:05:45,580 --> 00:05:47,090 ‫but it's really up to you. 141 00:05:47,090 --> 00:05:48,640 ‫So I'll say enable CORS, 142 00:05:48,640 --> 00:05:50,640 ‫and then this will confirm this method changes. 143 00:05:50,640 --> 00:05:53,260 ‫So yes, please replace the existing values, 144 00:05:53,260 --> 00:05:55,280 ‫it configures a lot of stuff for me. 145 00:05:55,280 --> 00:05:58,300 ‫And then if we go here, it has created an options method, 146 00:05:58,300 --> 00:06:00,070 ‫which will be used by CORS. 147 00:06:00,070 --> 00:06:02,610 ‫So we've made changes into our resources. 148 00:06:02,610 --> 00:06:03,790 ‫And we now need to deploy it. 149 00:06:03,790 --> 00:06:07,050 ‫So I'll go to actions and deploy the API, 150 00:06:07,050 --> 00:06:09,330 ‫and deploy it into prod. 151 00:06:09,330 --> 00:06:12,230 ‫So this has the effect that now my changes are 152 00:06:12,230 --> 00:06:13,950 ‫into the prod stage. 153 00:06:13,950 --> 00:06:17,770 ‫So first of all, if I refresh this page, it still works. 154 00:06:17,770 --> 00:06:20,387 ‫But now if I go to my S3 website, 155 00:06:20,387 --> 00:06:21,530 ‫and I refresh this page, 156 00:06:21,530 --> 00:06:23,250 ‫I'm crossing my fingers here. 157 00:06:23,250 --> 00:06:24,780 ‫And it's still doesn't work. 158 00:06:24,780 --> 00:06:27,670 ‫So maybe it takes a little bit of time to reflect, 159 00:06:27,670 --> 00:06:31,440 ‫or I'm going to make this my life extremely simple. 160 00:06:31,440 --> 00:06:33,780 ‫I'm gonna go back to my houses, 161 00:06:33,780 --> 00:06:35,460 ‫and it will do enable CORS. 162 00:06:35,460 --> 00:06:37,570 ‫And I'll choose the allow origin to be star, 163 00:06:37,570 --> 00:06:41,240 ‫to be anything, and maybe that's going to fix my problem. 164 00:06:41,240 --> 00:06:42,480 ‫So here we go. 165 00:06:42,480 --> 00:06:44,210 ‫I'm going to redeploy my API. 166 00:06:44,210 --> 00:06:48,530 ‫Sometimes, It's simple to just make it work like this. 167 00:06:48,530 --> 00:06:50,670 ‫So my API is in prod. 168 00:06:50,670 --> 00:06:54,230 ‫So let me wait a little bit, then it will refresh this page. 169 00:06:54,230 --> 00:06:57,260 ‫And if I tried again, it still doesn't work and I know why. 170 00:06:57,260 --> 00:06:58,243 ‫So let's get back into it. 171 00:06:58,243 --> 00:07:00,530 ‫I think it was good debugging for me. 172 00:07:00,530 --> 00:07:01,940 ‫I'll keep it on the record, 173 00:07:01,940 --> 00:07:03,870 ‫because it's good for you as well to see it. 174 00:07:03,870 --> 00:07:06,490 ‫So this method to enable CORS, 175 00:07:06,490 --> 00:07:11,170 ‫would work on anything where the integration is not a proxy. 176 00:07:11,170 --> 00:07:14,530 ‫So if I go to stage variables, for example, 177 00:07:14,530 --> 00:07:17,020 ‫I believe this wasn't a proxy, no, it is a proxy. 178 00:07:17,020 --> 00:07:19,100 ‫So if I go to mapping, here we go that one, 179 00:07:19,100 --> 00:07:20,970 ‫that one was not a proxy. 180 00:07:20,970 --> 00:07:22,600 ‫So if I enable the CORS here, 181 00:07:22,600 --> 00:07:25,320 ‫it would work and you can try it on your own at home, 182 00:07:25,320 --> 00:07:27,290 ‫just go actions, enable CORS, 183 00:07:27,290 --> 00:07:29,160 ‫change the index.html file, 184 00:07:29,160 --> 00:07:31,300 ‫and things will work for this method. 185 00:07:31,300 --> 00:07:33,852 ‫But for houses, this is a method 186 00:07:33,852 --> 00:07:36,520 ‫that goes into a Lambda Proxy. 187 00:07:36,520 --> 00:07:39,100 ‫And so the Lambda Proxy is what gets returned 188 00:07:39,100 --> 00:07:40,010 ‫to the clients. 189 00:07:40,010 --> 00:07:44,060 ‫And there is no changing of the method by the API gateway. 190 00:07:44,060 --> 00:07:47,320 ‫So to fix this, I would need to go into my Lambda function, 191 00:07:47,320 --> 00:07:49,400 ‫which I'm going to do right now. 192 00:07:49,400 --> 00:07:51,320 ‫So I'm going to my Lambda function, 193 00:07:51,320 --> 00:07:55,360 ‫and I'm going to allow it to send back a header, 194 00:07:55,360 --> 00:07:58,120 ‫which is going to allow the access control origin. 195 00:07:58,120 --> 00:08:02,200 ‫So this header is what's needed in my response to work. 196 00:08:02,200 --> 00:08:04,830 ‫So I'm allowing this header to work. 197 00:08:04,830 --> 00:08:07,630 ‫So I'm saying save, okay. 198 00:08:07,630 --> 00:08:11,220 ‫And so now my Lambda function should allow cross origin. 199 00:08:11,220 --> 00:08:13,530 ‫So let's go back to our website. 200 00:08:13,530 --> 00:08:15,260 ‫And now refresh it. 201 00:08:15,260 --> 00:08:18,080 ‫And now we get, yes, hello from my pretty houses, 202 00:08:18,080 --> 00:08:20,400 ‫directly into our index.html web page. 203 00:08:20,400 --> 00:08:23,550 ‫And there was no more cross origin resource sharing errors. 204 00:08:23,550 --> 00:08:24,383 ‫So that's it. 205 00:08:24,383 --> 00:08:25,216 ‫A really cool demo. 206 00:08:25,216 --> 00:08:27,770 ‫We've seen how to enable CORS on the API gateway 207 00:08:27,770 --> 00:08:30,200 ‫in two ways, for the proxy and for the non proxy. 208 00:08:30,200 --> 00:08:31,140 ‫I hope that was helpful 209 00:08:31,140 --> 00:08:33,090 ‫and I will see you in the next lecture.