Setting CORS response headers - ActoKids/api GitHub Wiki

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'.