Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AWS API Gateway CORS pre-flight check fails

I'm using Zappa to deploy my application, cors is enabled and everything seems to work OK when pressing the "test" button on the options in API Gateway "OPTIONS" resource.

However, when I try to do the CORS pre-flight check, I get a 500 error with body {"message": "Internal server error"} and CloudWatch logs Execution failed due to configuration error: Unable to transform request

EDIT:

This is what the configuration looks like:enter image description here

EDIT 2 I've tried enabling the CORS by both via zappa_settings.json ("cors": true) and by manually clicking enable cors in the AWS console

Does anyone have any pointers how to debug this further?

like image 854
Kimvais Avatar asked May 19 '17 10:05

Kimvais


People also ask

How do I fix the CORS issue in AWS API gateway?

Create an HTTP Archive (HAR) file when you invoke your API. Then, confirm the cause of the error in the file by checking the headers in the parameters returned in the API response. Use the developer tools in your browser to check the request and response parameters from the failed API request.

How do I check if CORS is enabled in AWS API gateway?

You can test your API's CORS configuration by invoking your API, and checking the CORS headers in the response. The following curl command sends an OPTIONS request to a deployed API.

How do you fix a failed CORS?

To get rid of a CORS error, you can download a browser extension like CORS Unblock ↗. The extension appends Access-Control-Allow-Origin: * to every HTTP response when it is enabled. It can also add custom Access-Control-Allow-Origin and Access-Control-Allow-Methods headers to the responses.


2 Answers

Does anyone have any pointers how to debug this further?

I have some things:

In your zappa_settings.json, you don't have this option binary_support: false, right?

Because:

You can leave cors: true but set binary_support: false - they don't appear to be playing nicely together.

(here have the same problem and solved removing binary support)

If no, you can try this:

  • In OPTIONS method, choose as integration type "mock"
  • For each Method of a resource
  • Go to Response Method
  • Add all the response method that should be supported (i.e. 200, 500, etc.)
  • For each response code set Response Headers to:

    X-Requested-With

    Access-Control-Allow-Headers

    Access-Control-Allow-Origin

    Access-Control-Allow-Methods

  • Go to Integration Response, select one of the created response codes, then Header Mappings

  • Insert default falues for headers example:

    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'

  • This operation has to be repeated for each method, including the newly created OPTIONS

  • Deploy the API to a stage
  • Check using http://client.cors-api.appspot.com/client that CORS requests have been successfully enabled

(extracted from here).

I assume that you already checked this: http://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html ...

I also found this to be considered, cited from here:

It should also be noted that simply enabling CORS at the API gateway layer is necessary but not sufficient for an application that wants to do CORS requests against a Zappa API that is IAM authenticated (and likely authenticated using other API-gateway level authenticators). The application itself will still need to respond with the appropriate CORS related headers, but it doesn't get the opportunity to do that if API Gateway blocks the pre-flight request.

Hope it helps to you!

like image 73
JP. Aulet Avatar answered Sep 27 '22 22:09

JP. Aulet


Sounds like your OPTIONS method is using a mapping template. Is that intentional?

If so, please post the template.

If not, then try re-running the CORS wizard from the API Gateway console to reset your CORS configuration.

Also, remember to re-deploy your latest changes before you test with the browser.

like image 33
MikeD at AWS Avatar answered Sep 27 '22 22:09

MikeD at AWS