Setting CORS response headers

Note: This wiki assumes an existing API Gateway with at least one resource, one method, and integration with a Lambda.

Part 1: Enable CORS

• From the API Gateway console, select the appropriate API from the list of available APIs.
• Click to highlight a Resource (e.g /events), then click the Actions menu button and select 'Enable CORS'.
  • Leave all options as default (Methods: GET, OPTIONS; Access-Control-Allow-Headers: 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'; Access-Control-Allow-Origin: '*').
  • Click 'Enable CORS and replace existing CORS headers'.
  • In the modal that pops up, click 'Yes, replace existing values'.
• Click on the newly-created OPTIONS method
• From the Method Execution Diagram on the right, click 'Integration Request'
• Make sure the selected Integration type is 'Mock'
• Return to the Method Execution Diagram and click 'Method Response'.
• Click 'Add Response'
• Enter '200' and click the check-mark button

Part 2: Configure Methods

• From the Resource List, click to to select a Method (e.g. GET) from beneath Resource on which you have enabled CORS (e.g /events).
• From the Method Execution Diagram on the right, click 'Method Response'.
  • Click 'Add Response'
  • Enter the number for the desired HTTP status code (e.g. 200 for ok, or 500 for a generic server error) and click the check mark button to confirm. Add additional status codes in the same manner, as needed.
  • Click the black arrow beside each HTTP status code.
    • Click 'Add Header'
    • Add the following headers:
      • X-Requested-With
      • Access-Control-Allow-Headers
      • Access-Control-Allow-Origin
      • Access-Control-Allow-Methods
• Repeat for all Methods, including OPTIONS

Part 3: Add an Integration Response

• Return to the Method Execution Diagram and click 'Integration Response'.
  • Click 'Add integration response'
    • Leave 'Lambda Error Regex' blank (or refer to this wiki)
    • For 'Method response status', select the desired status code from the drop-down. Note: if the drop-down is empty, make sure you've completed Part 2 of this wiki.
    • For 'Content handling', select 'Passthrough' from the drop-down
    • Click the 'Save' Button
• Click the black arrow beside the newly-created integration response.
• Click the black arrow beside 'Header Mappings'
  • Click 'Add mapping template'
  • To enable CORS for all callers, edit the Response Headers with mappings as follows: X-Requested-With: '' Access-Control-Allow-Headers: 'Content-Type,X-Amz- Date,Authorization,X-Api-Key,x-requested-with' Access-Control-Allow-Origin: '' Access-Control-Allow-Methods: 'POST,GET,OPTIONS'
  • To restrict access to a given domain (e.g. https://example.com), edit the Response Headers with mappings as follows: X-Requested-With: 'https://example.com' Access-Control-Allow-Headers: 'Content-Type,X-Amz- Date,Authorization,X-Api-Key,x-requested-with' Access-Control-Allow-Origin: 'https://example.com' Access-Control-Allow-Methods: 'POST,GET,OPTIONS'
  • Click 'Save' button
• Repeat for all Methods

Click the 'Actions' menu button and select 'Deploy API'. Choose a deployment stage and click 'Deploy'.