Simple steps to enable CORS in API Gateway through console/cloud formation
What is CORS?
Cross-Origin Resource Sharing (CORS) is an HTTP-header-based mechanism that allows a server to indicate any other origins (domain, scheme, or port) than its own from which a browser should permit the loading of resources. CORS also relies on a mechanism by which browsers make a “preflight” request to the server hosting the cross-origin resource, in order to check that the server will permit the actual request. In that preflight, the browser sends headers that indicate the HTTP method and headers that will be used in the actual request.
Let us see how we can enable the CORS in API Gateway to restrict the API access through specific domains only.
We have the API that we created earlier which returns the files based on the URI path. We will be using this API to configure the CORS setting.
Without CORS enabled, this API can be accessed through public IPs and domains. But to access this API through private servers/domain or to limit the access of the API through specific servers we have to enable the CORS setting through the console.
I have created one simple script to call AWS Rest API and deploy it to a private VM. We will access the script through a private IP address and will look into the behavior of API with cors enabled and disabled.
test-cors-script.html
<html>
<head> </head>
<body>
<p>Testing CORS API</p>
<script type="text/javascript">
var apiUrl =
"https://gmtrzm0ank.execute-api.us-west-2.amazonaws.com/dev/config";
fetch(apiUrl, {
method: "GET"
})
.then((response) => {
return response.json();
})
.then((data) => {
console.log("data ", data);
})
.catch((err) => {
console.log("error ", err);
});
</script>
</body>
</html>
The API is deployed which is using the S3 service to return the content of the test.json file.
Currently, we have just deployed the API and not enabled the cors, let us first check the behaviour of API when calling it from the browser.
The API returns the content of a file as expected when calling from the browser.
Now let us call the same API by running our script from a private VM, and we will check the response of API in the Developer’s console.
As we can see, our script fails to fetch the response from the same API when trying to access it through a private server. And it gives the CORS standard error.
Now, we will enable the CORS for our API, and then will check the response. To enable the CORS, go to API Gateway, click on the method on which we have to enable CORS. Click on Action and enable CORS.
Select all the options to handle error responses too. You can add the access-control-allow-headers if your API is returning extra headers like x-api-key. You can also specify the domain in an access-control-allow-origin to restrict access of API through a specific server only or you can put ‘*’ if you want your API to get access from anywhere.
When you enable the CORS by using the AWS Management Console, API Gateway creates an ‘OPTIONS’ method and attempts to add the Access-Control-Allow-Origin header to your existing method integration responses. This method ensures that the response from API has the required headers and domain to approve your request. After enabling the CORS, we have to deploy the API again to make the changes impact in API.
As you can see below, now we are able to access our AWS API through the script from a private server.
You can also specify a specific domain in CORS to access your API through a specific server only.
After enabling it, the API will only be able to access it from ‘www.myserver.com’. When we will try to access the API from a different server or browser, it will give CORS error as shown below.
So this was all about how to enable the CORS in API Gateway. To configure the same settings from cloud formation, I have uploaded all the required YAML and deployment files on https://github.com/Rohan009/aws_s3_api_binary_files
The above link contains allowedOriginHost parameter and swagger definition in yaml to configure cors.
Thank You.
