API Gateway request works through CURL but fails when called via JS XMLHttpRequest

Question

I'm trying to send GET/POST requests to an AWS API Gateway I setup. The lambdas/tests on AWS all work with the input/headers I'm trying to send, and return a 200 Status. I have enabled CORS on all the required resources, so when the browser sends the OPTIONS request, it returns the appropriate headers. It even works when I access the resource via CURL. But if I send the request from Chrome, I get a 500 response with these headers:

access-control-allow-headers: Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token
access-control-allow-methods: GET,OPTIONS,POST
access-control-allow-origin: *
content-length: 36
content-type: application/json
date: Sun, 20 Mar 2022 02:25:17 GMT
x-amz-apigw-id: PQuGLGw3oAMFXcw=
x-amzn-errortype: InternalServerErrorException
x-amzn-requestid: 4133f1b8-616a-464d-ae85-7f0fee8024ac

And this error is displayed in the console:

Access to XMLHttpRequest at has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

I enabled cloudwatch on the api, and that shows that the error is caused here:

Execution failed due to configuration error: Unable to transform request

No clue what that means, and it's failing on the "Options" request, which is a mock request automatically set up by AWS when I enabled CORS. It should have everything it needs, right?

Any idea what I'm doing wrong here? Thanks for your help.

Note: A similar question was asked, but was never resolved. There was one answer and it didn't work:

AWS API Gateway working through CURL but not working through javascript

Answer 1

Had the same issue, and I was able to solve it. Originally I had / in Binary Media Types, changing it to image/* and multipart/form-data got ride of the error.

Not sure if these other configurations will be useful for other people

Integration Response