API gateway runs into preflight issue forever after adding a specific Content-Type

Question

Hi,

I faced this issue multiple times and I believe this is easily reproducible.

1. Build a new Restful API with proxy lambda integration.
2. Add "Accept" header in "Method request" option and "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" in "Method Response" option.
3. Test it from a client app (JS). Boom! The API gateway nevers works from on -> Even if you delete the resource and create a new one.

![Header in Method Request tab](/media/postImages/original/IMdPVQhx3pRwCRe7nDZQ2Rtg)

![Integration Request lambda proxy](/media/postImages/original/IME1X21tBWSoeM4xm4XWGWTw)

![Method response Content-Types](/media/postImages/original/IMWCOxpkFmRM6NhPcwhFpYzg)

![Lambda code to return a file](/media/postImages/original/IMFJdwhT52TfWj6ey_qM-94A)

![Javascript code to download the file](/media/postImages/original/IMvJ80Nw4PSgu2nwL3Ya8OOQ)

![Binary type](/media/postImages/original/IMxzuAt3orSQGaR8euKwhPsQ)

Please be aware that the CORS is configured too.

After running this once, the API gateway never works despite deleting the resources(test in this case) and creating new ones.

Deepak · Accepted Answer

I've figured it out and adding the answer here as it may help one in the community.

Basically all the APIs started working after I specified the expected "**Accept**" and "**Content-Type**" headers from client and server side code respectively, and removed the header addition from the Method request and Method response options of API Gateway console.

I've strictly added the "Accept" header for my normal APIs which is usually *application/json* and for the binary that I'm expecting, I am adding *application/vnd.openxmlformats-officedocument.spreadsheetml.sheet*. In the "Content-Type" header that I send as the proxy response from lambda, I add the same values appropriately.

This solved the strange issue of no APIs working after adding the binary type. I'm still confused as to how the API worked fine during the first try of fetching a binary content :|

re:Post Agent · Answer

The issue you're experiencing with the API Gateway and preflight requests is likely related to Cross-Origin Resource Sharing (CORS) configuration. When you add a specific Content-Type like "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" to your API, it triggers a preflight request from the browser, which needs to be handled correctly.

To resolve this issue:

1. Ensure that you have an OPTIONS method configured for your resource. This is necessary to handle preflight requests.

2. For the OPTIONS method, set up a mock integration with the following CORS headers:

- Access-Control-Allow-Headers: 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'
   - Access-Control-Allow-Methods: '*' (or specify the methods you want to allow)
   - Access-Control-Allow-Origin: '*' (or specify the allowed origins)

3. Set the integration passthrough behavior to NEVER for the OPTIONS method.

4. For your Lambda proxy integration, make sure your Lambda function is returning the necessary CORS headers in its response. This is crucial because, in a proxy integration, the backend (your Lambda function) is responsible for returning these headers.

5. In your Lambda function, include the following headers in the response:

- Access-Control-Allow-Origin: '*' (or your specific allowed origin)
   - Access-Control-Allow-Headers: 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'
   - Access-Control-Allow-Methods: 'GET,POST,OPTIONS' (or the methods you're using)

6. If you're using binary content (which seems likely given the spreadsheet Content-Type), ensure that you've added the content type to the binary media types list in your API settings.

7. When making requests from your JavaScript client, make sure you're setting the correct 'Accept' header to match the content type you're expecting.

If the issue persists even after deleting and recreating resources, it's possible that there might be some caching at play. Try clearing your browser cache or using a different browser to test. Also, consider deploying your API to a new stage to ensure you're not hitting a cached version of your API.

Remember, when dealing with non-simple requests (which include custom content types), proper CORS configuration is crucial for the API to function correctly across different origins.  
**Sources**  
[CORS for REST APIs in API Gateway - Amazon API Gateway](https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html)  
[Cross-origin resource sharing support and Amazon EC2 - Amazon Elastic Compute Cloud](https://docs.aws.amazon.com/AWSEC2/latest/APIReference/cors-support.html)  
[Set up a proxy integration with a proxy resource - Amazon API Gateway](https://docs.aws.amazon.com/apigateway/latest/developerguide/api-gateway-set-up-simple-proxy.html)  
[Content type conversions in API Gateway - Amazon API Gateway](https://docs.aws.amazon.com/apigateway/latest/developerguide/api-gateway-payload-encodings-workflow.html)

API gateway runs into preflight issue forever after adding a specific Content-Type

관련 콘텐츠