Requests to API Gateway fail with CORS error if I add headers.

Question

I have an API gateway which is integrated with Lambda. It was working fine so far while accessing from my localhost, but after adding Authorization (or any other) headers to the request, I get the following errors
`Access to XMLHttpRequest at 'https://******.amazonaws.com/prod/api/chat?id=****' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.`
![Enter image description here](/media/postImages/original/IMtx9iOKcVQaeJV9JEyzBs4w)

Here is the code snippet

```
const apiResponse = await axios.post(
          `https://******.amazonaws.com/prod/api/chat?id=${this.$route.params.p}`,
          response.data,
          {
            headers: {
              'Authorization': `Bearer some-token-here`,
            }
          }
        )
```

I believe my CORS configuration should allow headers through, but it doesn't work.
![Enter image description here](/media/postImages/original/IMu1NP8vquTWKW9ijv0hOfEg)
![Enter image description here](/media/postImages/original/IMUh1VbXqeSIK8t4B0Qfv9wg)
![Enter image description here](/media/postImages/original/IMBfFVZxK_RfKMtQ_59-28cQ)
![Enter image description here](/media/postImages/original/IM6nSOog_rSTK4vMUpIXfs8w)

Please advise

Answer

Hello,

The CORS error you're experiencing when adding headers is likely due to the configuration on AWS API Gateway not matching the requirements of your application's requests. Ensure that:

1. CORS is enabled on your API Gateway.
2. The Lambda function returns the necessary CORS headers **if you're using Lambda Proxy Integration**.
3. The OPTIONS preflight response is correctly configured in API Gateway to include CORS headers.

After making any changes, redeploy your API for the updates to take effect. If the issue persists, verify the request headers and consult CloudWatch Logs for further debugging.

Answer

This error might be occurring because your API Gateway is not configured to handle CORS for requests with custom headers like Authorization. When you add custom headers to your request, the browser sends a preflight request (an HTTP OPTIONS request) to the server to check if the actual request is allowed. Your API Gateway needs to respond to this preflight request with the appropriate CORS headers.

Solution: Enabling CORS for a REST API resource

**Solution:** [Enabling CORS for a REST API resource](https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html)

Requests to API Gateway fail with CORS error if I add headers.

相關內容