AWS SAM HTTP API and CORS

So many acronyms in that title - I promise you they actually make sense!

I was doing some local development against an AWS SAM-based API built with an AWS API Gateway HTTP APIs (not to be confused with the REST APIs), and the error message I was getting really didn't help me find the solution:

Access to fetch at 'https://id123456.execute-api.us-east-1.amazonaws.com/' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Contrary to the error message, setting the request's mode to no-cors is a terrible idea that will simply stop any CORS requests from working. CORS is a key part of browser security that stops them from loading malicious code from other (potentially bad) servers; though it's very useful, it's often very frustrating.

In addition to the HTTP API, I was using a Cognito Authorizer and passing my JWT as a bearer token in the Authorization header. The issue was that in my SAM configuration for my HTTP API I hadn't included header in in the optional AllowHeaders section of the the API's CorsConfiguration. Adding it alongside the HTTP method I actually wanted to use was enough to get me past the issue, no thanks to the opaque error message:

      CorsConfiguration:
        AllowOrigins:
          - http://localhost:5173
        AllowMethods:
          - GET
        AllowHeaders:
          - Authorization

This issue was really hard to search for, and most results I found were for the older REST APIs.