Let's create an API with CORS enabled from scratch. Steps 1 to 4 are the same as we have seen in Chapter 2, Building Serverless REST APIs with API Gateway:

1. Create an API:

aws apigateway create-rest-api 
    --name 'API WITH CORS' 
    --region us-east-1 
    --profile admin

2. Get the ID of the root resource path :

aws apigateway get-resources 
    --rest-api-id xenqybowjg

3. Create a resource greeting under the root path:

aws apigateway create-resource  
    --rest-api-id xenqybowjg 
    --parent-id p8yd8xde55 
    --path-part greeting

4. Create a subresource with a path parameter that can accept a string:

aws apigateway create-resource 
    --rest-api-id xenqybowjg 
    --parent-id xkjhh7 
    --path-part "{name}"

5. Next, we will create the GET method:

• 1. Execute put-method for the GET method:

aws apigateway put-method  
    --rest-api-id xenqybowjg 
    --resource-id sfgfk6 
    --http-method GET 
    --authorization-type "NONE"

• 2. Execute put-method-response for the GET method:

aws apigateway put-method-response 
    --rest-api-id xenqybowjg 
    --resource-id sfgfk6 
    --http-method GET 
    --status-code 200 
    --response-parameters file://put-method-response-get.json

put-method-response-get.json should look as follows:

{
  "method.response.header.Access-Control-Allow-Origin": false
}

• 3. Execute put-integration for the GET method:

aws apigateway put-integration 
    --rest-api-id xenqybowjg 
    --resource-id sfgfk6 
    --http-method GET  
    --type MOCK  
    --integration-http-method GET 
    --request-templates "{"application/json": "{"statusCode": "200"}"}"

• 4. Execute put-integration-response for the GET method:

aws apigateway put-integration-response 
    --rest-api-id xenqybowjg 
    --resource-id sfgfk6 
    --http-method GET 
    --status-code 200 
    --response-templates file://response-template-get.json 
    --response-parameters file://put-method-integration-get.json 
    --selection-pattern "" 
    --region us-east-1 --profile admin

The response-template-get.json file should have the following contents:

{"application/json": "Hello $input.params('name')"}

The put-method-integration-get.json file should have the following contents:

{
  "method.response.header.Access-Control-Allow-Origin": "'*'"
}

6. Now, we will create the OPTIONS method:

• 1. Execute put-method for the OPTIONS method:
     

aws apigateway put-method  
    --rest-api-id xenqybowjg 
    --resource-id sfgfk6 
    --http-method OPTIONS 
    --authorization-type "NONE" 

• 2. Execute put-method-response or the OPTIONS method:

aws apigateway put-method-response 
    --rest-api-id xenqybowjg 
    --resource-id sfgfk6 
    --http-method OPTIONS 
    --status-code 200 
    --response-parameters file://put-method-options.json

put-method-options.json should look like this:

{
   "method.response.header.Access-Control-Allow-Origin": false,
   "method.response.header.Access-Control-Allow-Headers": false,
"method.response.header.Access-Control-Allow-Methods": false
 }

• 3. Execute put-integration for the OPTIONS method:

aws apigateway put-integration 
    --rest-api-id xenqybowjg 
    --resource-id sfgfk6 
    --http-method OPTIONS 
    --type MOCK  
    --integration-http-method OPTIONS 
    --request-templates "{"application/json": "{"statusCode": "200"}"}"

• 4. Execute put-integration-response for the OPTIONS method:

aws apigateway put-integration-response 
    --rest-api-id xenqybowjg 
    --resource-id sfgfk6 
    --http-method OPTIONS 
    --status-code 200 
    --response-parameters file://put-method-integration-response-options.json 
    --selection-pattern ""

The put-method-integration-response-options.json file should contain the following content:

{
  "method.response.header.Access-Control-Allow-Origin": "'*'",
  "method.response.header.Access-Control-Allow-Headers": "'Content-Type,Authorization,X-Amz-Date,X-Api-Key,X-Amz-Security-Token'"
}

7. Deploy the API:

aws apigateway create-deployment 
    --rest-api-id xenqybowjg 
    --stage-name dev  
    --stage-description "Dev stage" 
    --description "Dev deployment"

Execute the following URL from the browser: https://xenqybowjg.execute-api.us-east-1.amazonaws.com/dev/greeting/Heartin. 

8. Execute the URL from CodePen as follows:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://qngs4lsxob.execute-api.us-east-1.amazonaws.com/dev/greeting/Heartin');
xhr.onreadystatechange = function (event) {
console.log(event.target.response);
}
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send();

In the Chrome developer console, we should now see a success message as follows, instead of the errors we saw in the Getting ready section.