How to Configure CORS in AWS API Gateway Easily

To configure CORS in AWS API Gateway, enable CORS on your API resource by adding the necessary Access-Control-Allow-Origin headers and HTTP methods in the gateway settings or via the console. This allows browsers to accept cross-origin requests from specified domains.

Syntax

Configuring CORS in API Gateway involves setting HTTP headers and methods that control cross-origin access. The key headers are:

• Access-Control-Allow-Origin: Specifies allowed domains.
• Access-Control-Allow-Methods: Lists allowed HTTP methods like GET, POST.
• Access-Control-Allow-Headers: Lists allowed headers like Content-Type.
• Access-Control-Allow-Credentials: Indicates if credentials are allowed.

These headers are added to the OPTIONS method response and the actual method responses.

plaintext

OPTIONS /resource
  Method Response:
    200:
      Response Headers:
        Access-Control-Allow-Origin: '*'
        Access-Control-Allow-Methods: 'GET,POST,OPTIONS'
        Access-Control-Allow-Headers: 'Content-Type,X-Amz-Date,Authorization'
      Response Body: empty
GET /resource
  Method Response:
    200:
      Response Headers:
        Access-Control-Allow-Origin: '*'
      Response Body: your API response

Example

This example shows how to enable CORS for a GET method on an API Gateway resource using the AWS Console or AWS CLI. It adds an OPTIONS method with the correct headers and updates the GET method response headers.

bash

1. In AWS Console, select your API Gateway.
2. Choose the resource (e.g., /items).
3. Click "Actions" > "Enable CORS".
4. Confirm the default settings (allow all origins, methods GET, POST, OPTIONS).
5. Deploy the API.

# Using AWS CLI to add OPTIONS method with CORS headers
aws apigateway put-method --rest-api-id <api-id> --resource-id <resource-id> --http-method OPTIONS --authorization-type NONE

aws apigateway put-method-response --rest-api-id <api-id> --resource-id <resource-id> --http-method OPTIONS --status-code 200 --response-parameters method.response.header.Access-Control-Allow-Origin=true method.response.header.Access-Control-Allow-Methods=true method.response.header.Access-Control-Allow-Headers=true

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

aws apigateway put-integration-response --rest-api-id <api-id> --resource-id <resource-id> --http-method OPTIONS --status-code 200 --response-parameters '{"method.response.header.Access-Control-Allow-Origin":"'*'","method.response.header.Access-Control-Allow-Methods":"'GET,POST,OPTIONS'","method.response.header.Access-Control-Allow-Headers":"'Content-Type,X-Amz-Date,Authorization'"}'

Output

OPTIONS method created with CORS headers; API deployed successfully.

Common Pitfalls

Common mistakes when configuring CORS in API Gateway include:

• Not adding an OPTIONS method, which browsers use for preflight requests.
• Forgetting to include Access-Control-Allow-Origin header in both OPTIONS and actual method responses.
• Setting Access-Control-Allow-Origin to a specific domain but testing from another domain.
• Not deploying the API after changes, so updates don't take effect.

Always test with browser developer tools to check CORS headers in responses.

plaintext

Wrong:
GET /resource
  Method Response:
    200:
      Response Headers: none

Right:
GET /resource
  Method Response:
    200:
      Response Headers:
        Access-Control-Allow-Origin: '*'

OPTIONS /resource
  Method Response:
    200:
      Response Headers:
        Access-Control-Allow-Origin: '*'
        Access-Control-Allow-Methods: 'GET,POST,OPTIONS'
        Access-Control-Allow-Headers: 'Content-Type,Authorization'

Quick Reference

Summary tips for configuring CORS in API Gateway:

• Always add an OPTIONS method for preflight requests.
• Set Access-Control-Allow-Origin to * or your specific domain.
• Include all HTTP methods your API supports in Access-Control-Allow-Methods.
• List all custom headers your client sends in Access-Control-Allow-Headers.
• Deploy your API after making changes.

Key Takeaways

Enable an OPTIONS method with proper CORS headers for preflight requests.

Include Access-Control-Allow-Origin header in all method responses.

Deploy your API after configuring CORS to apply changes.

Test CORS behavior using browser developer tools to verify headers.

Specify allowed methods and headers clearly to avoid CORS errors.