Amazon API Gateway : Enabling CORS support in mock API response

Problem Statement:

1. An API is created & deployed on Amazon API Gateway.
2. API response is mocked on Amazon API Gateway.
3. The API is exported as swagger from API Gateway and imported in swagger editor — https://editor.swagger.io/
4. In the swagger editor, execute the API.
5. Error related to CORS is encountered.

Issue:

Cross-origin resource sharing (CORS) is a browser security feature that restricts HTTP requests that are initiated from scripts running in the browser. It is required when the client domain does not match the server domain.

In the current case client domain is editor.swagger.io and the API is hosted on domain kjasja1kie.execute-api.eu-west-1.amazonaws.com. Calling the api from swagger editor website, results in below error:

“Failed to fetch. Possible Reasons: CORS Network Failure URL scheme must be “http” or “https” for CORS request.”

Solution:

“Access-Control-Allow-Origin” header property to be set to ‘*’ in the mock response, for allowing access to this API from anywhere.

Steps:

1. In the Amazon API Gateway, open the API, select the required method of the resource (e.g. GET )and click on method response of the mocked API.

2. Expand the HTTP response code 200

3. Click on add header

4. Add the header property — “Access-Control-Allow-Origin”

5. In the integration response section of the GET Method, set the value of this header property “Access-Control-Allow-Origin” to ‘*’

6. Deploy the API

7. Retest the API from swagger website. The CORS error is resolved and success response is received.