Want to resolve CORS error from API Gateway REST API? Our Support Engineers have an easy resolution for this issue.

Read to find out how to troubleshoot the “No Access-Control-Allow-Origin header is present on the requested resource” from Amazon API Gateway REST API. It is time to learn from the best at Bobcares.

How to fix CORS error from API Gateway REST API

The CORS errors occur when the server does not return HTTP headers as per the CORS standard. Resolving this issue involves re-configuring the API to meet the CORS standard.

We would like to point out that the CORS enabling at the resource level ensures its handling using backend integrations or API Gateway configurations.
The No ‘Access-Control-Allow-Origin’ header present error is a result of any of the following reasons:

• Current configuration of an API with non-proxy integration or proxy integration will not return CORS header as per the CORS standard.
• The current confogiration of OPTIONS method in the API will not return the CORS header as per the CORS standard.
• The configurations of other method types like PUT,POST or GET will not return CORS header as per the CORS standard.
• In case of a private REST API, the wrong Invoke URL or the traffic not routed to the interface VPS endpoint can also result in an error message.

You can confirm the cause of the error with these steps:

• While invoking the API, create a HAR (HTTP Archive) file. Next, check the headers to confirm the cause behind the error.
• You can also utilize the developer tools in the browser to check the response and request parameters of the failed API request.

Enable CORS on the API resource that returned the error

In order to enable CORS, you need to choose DEFAULT 5XX and DEFAULT 4XX checkboxes for Gateway Responses for <api-name> API.

The API Gateway responds with correct CORS headers regardless of whether the request reached the endpoint when these default options are selected.

Also, remember to choose the OPTIONS method checkbox for Methods. We also recommend checking boxes for all other methods like PUT, POST, and GET that are available to CORS requests.

Configure REST API integrations to return required CORS headers

First, configure the backend HTTP server or AWS Lambda function to send the CORS headers. You also need to return the list of domains in Access-Control-Allow-Origin as a value for the header.

For a proxy integration, the backend response is forwarded directly to the client by the API Gateway. Hence, you will not be able to set up an integration response in API Gateway for a proxy integration to modify the parameters returned by the API’s backend.

Private REST APIs: Check the private DNS setting of the interface endpoint

Verify the private DNS for the associated Interface VPC endpoints. They have to be enabled for private REST APIs. If enabled, call the private API from the Amazon VPC via the private DNS name. This helps avoid CORS errors.

In case private DNS is not enabled, route traffic manually to the VPC’s endpoint’s IP addresses from the invoke URL.

When private DNS is not enabled and CORS is enabled, remember the following:

• No utilization of endpoint-specific public DNS names for accessing private API within the VPC.
• You cannot use the Host header option.
• Cannot use the x-apigw-api-id custom header either.

[Need a hand? We are here to help.]

Conclusion

To summarize, we went over how to troubleshoot CORS errors from the API Gateway API. The Support Team at Bobcares is here with a solution for any issue you face.