‫So API gateway supports the browser security,
‫Cross-Origin Resource Sharing.
‫So CORS must be enabled if you want to be able
‫to receive API calls from another domain.
‫So for this API gateway works without an,
‫we create an options pre-flight request.
‫And then this contains the following CORS headers,
‫Access-Control-Allow-Methods,
‫Access-Control-Allow-Headers, Allow Origins.
‫And so these methods can be set from the console.
‫So we'll be seeing how we can do this.
‫And so to summarize how CORS are,
‫and how they work, here is a very concrete example.
‫So our web browser goes to our S3 bucket,
‫to get our static website content,
‫which is at example.com, www.example.com
‫and the JavaScript that we've launched,
‫and launched from the S3 bucket is asking us
‫to make API calls into our cross origin api.example.com.
‫So as such our web browser as a security,
‫we'll make an options preflight request
‫into our API gateway.
‫Then our API gateway will give us a preflight response,
‫if the origin is allowed to make a cross origin request.
‫And finally, if everything goes well,
‫then the web browser and the API gateway
‫can talk to one another.
‫So let's go in the console to see how we can set this up.
‫So let's demo cross-origin resource sharing,
‫by first creating a website in Amazon S3.
‫So I'm going to create a website, I'll call it
‫stephane-demo-cors-apigateway.
‫And it will create this in the same region I'm in right now.
‫So London, it doesn't really matter.
‫And I will go ahead and unlock the public access,
‫because I want to be able to access this as a website.
‫Yes, I acknowledge that everything will be good.
‫And I'll create these buckets.
‫I need to go now to my API gateway buckets.
‫So I will go into it.
‫And I will upload an index HTML file
‫that we'll show you in a second.
‫But first, I need to enable this bucket as a website.
‫So we'll click on this, get say yes,
‫I want this bucket to be a website.
‫I want you to load index.html,
‫and then click on save.
‫So this is going to be the endpoint,
‫I'm going to access my website in.
‫But currently I can't.
‫So if I try to access this endpoint,
‫I get a 403 Forbidden,
‫because I need to make my bucket public.
‫And so for doing so, we need to go to the bucket policy.
‫And I'm going to go to the documentation.
‫And here there should be a simple policy
‫for making my bucket public.
‫So here I will say, here I will scroll down,
‫and will allow public read on everything, for get objects.
‫So I will copy this entire policy,
‫which should make my bucket public.
‫I just have to change the example buckets
‫by the name of my bucket here.
‫Okay, here we go.
‫So now, this bucket has public access.
‫And so if I refresh this page,
‫I get a 404 Not Found,
‫because I haven't uploaded yet an index.html
‫So I'm going to do this right now.
‫So let's go into my API gateway code,
‫and have an index.html
‫So this is a very simple HTML file,
‫pretty much the same we used in the S3 section,
‫and in here is going to fetch something from my API gateway.
‫So what I want it to fetch is if I go to my API gateway,
‫and I go to my stages,
‫and I go to my prod stage,
‫I want it to fetch something from, for example, the houses.
‫So I'll take these houses right here.
‫And this works, hello from my pretty houses.
‫So I want my S3 website to get something from this URL.
‫So I'm going to copy this entire URL right here.
‫And you should do the same if you're trying
‫to go with the hands on with me.
‫And sorry, this is actually not what I wanted.
‫I wanted to change the to do in here.
‫So I want to fetch this URL, sorry,
‫I don't want to change this line, please.
‫And then the response will be having some text,
‫we will extract the text,
‫and then we will pass it to our HTML.
‫So let's upload this index at HTML in here,
‫and see what is going to happen.
‫So I'm uploading my code from API gateway,
‫index.html, upload.
‫And I'm going to enable the Chrome Developer Tools.
‫So more tools, and then developer tools
‫to see what's going on.
‫Here we go.
‫So I'm enabled with the tools,
‫and essentially in this page
‫that I want my developer tools to be.
‫And I'm going to refresh this page.
‫I'm going to go to console, refresh this page
‫and see what happens.
‫So let's go, refresh it.
‫And it says making a CORS request to the API gateway.
‫But it doesn't show anything.
‫Whereas we know that this API is working
‫because it responds, hello from my pretty houses.
‫So back in this web page,
‫if we look at the console,
‫it says access to fetch this address,
‫or not on my API gateway from this origin
‫has been blocked by CORS policy.
‫No access-control-allow-origin header
‫is present on the requested resource.
‫So this is because we haven't configured CORS yet
‫on our API gateway.
‫So we're going to do this now.
‫We go back into our resources.
‫And we go to the houses.
‫This is where we want to allow CORS.
‫And I'll do action, enable CORS.
‫And here I'm greeted with what I should enable CORS on.
‫So I'm going to say yes,
‫I want you to allow gets and options.
‫And these methods are great.
‫And the headers are such, so I'll leave it as is.
‫But this is what I need to change.
‫So the access control allow origin,
‫if I leave it as a star,
‫for sure it's going to work for any domain.
‫But I could also go ahead and enter the domain
‫of my websites.
‫So I could enter this entire domain here, in there.
‫So you can do this way as well.
‫So either a star or put the entire domain
‫and because I'm picky, I'm going to use the entire domain,
‫but it's really up to you.
‫So I'll say enable CORS,
‫and then this will confirm this method changes.
‫So yes, please replace the existing values,
‫it configures a lot of stuff for me.
‫And then if we go here, it has created an options method,
‫which will be used by CORS.
‫So we've made changes into our resources.
‫And we now need to deploy it.
‫So I'll go to actions and deploy the API,
‫and deploy it into prod.
‫So this has the effect that now my changes are
‫into the prod stage.
‫So first of all, if I refresh this page, it still works.
‫But now if I go to my S3 website,
‫and I refresh this page,
‫I'm crossing my fingers here.
‫And it's still doesn't work.
‫So maybe it takes a little bit of time to reflect,
‫or I'm going to make this my life extremely simple.
‫I'm gonna go back to my houses,
‫and it will do enable CORS.
‫And I'll choose the allow origin to be star,
‫to be anything, and maybe that's going to fix my problem.
‫So here we go.
‫I'm going to redeploy my API.
‫Sometimes, It's simple to just make it work like this.
‫So my API is in prod.
‫So let me wait a little bit, then it will refresh this page.
‫And if I tried again, it still doesn't work and I know why.
‫So let's get back into it.
‫I think it was good debugging for me.
‫I'll keep it on the record,
‫because it's good for you as well to see it.
‫So this method to enable CORS,
‫would work on anything where the integration is not a proxy.
‫So if I go to stage variables, for example,
‫I believe this wasn't a proxy, no, it is a proxy.
‫So if I go to mapping, here we go that one,
‫that one was not a proxy.
‫So if I enable the CORS here,
‫it would work and you can try it on your own at home,
‫just go actions, enable CORS,
‫change the index.html file,
‫and things will work for this method.
‫But for houses, this is a method
‫that goes into a Lambda Proxy.
‫And so the Lambda Proxy is what gets returned
‫to the clients.
‫And there is no changing of the method by the API gateway.
‫So to fix this, I would need to go into my Lambda function,
‫which I'm going to do right now.
‫So I'm going to my Lambda function,
‫and I'm going to allow it to send back a header,
‫which is going to allow the access control origin.
‫So this header is what's needed in my response to work.
‫So I'm allowing this header to work.
‫So I'm saying save, okay.
‫And so now my Lambda function should allow cross origin.
‫So let's go back to our website.
‫And now refresh it.
‫And now we get, yes, hello from my pretty houses,
‫directly into our index.html web page.
‫And there was no more cross origin resource sharing errors.
‫So that's it.
‫A really cool demo.
‫We've seen how to enable CORS on the API gateway
‫in two ways, for the proxy and for the non proxy.
‫I hope that was helpful
‫and I will see you in the next lecture.