API Gateway HTTP API CORS

Question

I am using the new API Gateway HTTP which during the configuration enables you to add CORS. So I have set the Access-Control-Allow-Origin Header with the setting *.

However when I make a request using Postman I do not see that header and this I causing my VueJS Axios request to fail.

I previously used a Lambda Proxy Integration and did the following in my Lambda.

"headers": { 
            "Access-Control-Allow-Origin": "*" 
        }

However the new HTTP API just does not seem to implement CORS. Maybe I am missing something simple.

--EDITS--

So I have continue to find an answer and came across a blog post from Serverless who set the following:

It’ll ensure following headers:

Access-Control-Allow-Origin: *
Access-Control-Allow-Headers:

Content-Type, X-Amz-Date, Authorization, X-Api-Key, X-Amz-Security-Token, X-Amz-User-Agent
Access-Control-Allow-Methods:

OPTIONS, and all the methods defined in your routes (GET, POST, etc.)

I have tried these and redeployed and still only get the standard headers

Harvester

Have you redeployed since adding the CORS setting? – Theorist

@Theorist it was set to AutoDeploy, but just in case that hadn't worked i deployed to a new stage and tried that and still no Headers – Harvester

I tried to replicate your issue and can't get CORS headers out whatsoever. Also tried running the requests from the browser console. I suggest you open a support ticket with AWS. – Quartered

@Quartered seems my AWS account cannot create a technical support ticket. – Harvester

I haven't used the new HTTP api. I have a different experience to you with Lambda integration. I found that on an Options request I needed 'access-control-allow-origin': "", 'access-control-allow-headers': "content-type", 'access-control-allow-methods': "GET, PUT, POST, DELETE". On other requests, just 'access-control-allow-origin': "", 'access-control-allow-headers': "content-type" – Villegas

I have the exact same problem, I think. Check my question. #61215824 I am sending this question to the support to make them aware that it's a big problem. – Weixel

@SimonGuldstrand did you get a response on your question? I can't open the stack overflow question you linked, and I have the same issue. I can't get any CORS headers on any request from the HTTP API, I'm not sure whether to wait for a response or redo everything using the REST API – Vaal

Adding the Content-Type fixed this issue for me. Thanks! – Anabelanabella

Answer 1

For anyone using HTTP API and the proxy route ANY /{proxy+}

You will need to explicitly define your route methods in order for CORS to work.

Wish this was more explicit in the AWS Docs for Configuring CORS for an HTTP API

Was on a 2 hour call with AWS Support and they looped in one of their senior HTTP API developers, who made this recommendation.

Hopefully this post can save some people some time and effort.

Bizet

I spent a lot of time trying to figure this out. Wish this was documented more clearly as well. Huge time save right here. Thank you. – Ornie

Answer 2

If you have a JWT authorizer and your route accepts ANY requests, your authorizer will reject the OPTIONS request as it doesn't contain an Authorization/Bearer token. To resolve this issue, you need to explicitly point your route to the HTTP request/method you need. E.g. POST

In that case, your authorizer will ignore the OPTIONS request without a JWT and proceed with the required request.

Duelist

Bingo, that was the exact issue I was facing. Thanks for the clear and simple explanation. To add to this, if anyone's using a single endpoint to handle all requests (e.g.: graphql endpoint), add all the methods you're using (GET, POST, PUT, etc.) instead of using ANY. – Carboxylate

Answer 3

(This is answer just for AWS HTTP api gateway/AWS api gateway v2). I have met the same problem and I asked the AWS support finally. The tricky thing is actually CORS had been already working after we configured it, but I just didn't get how to test it (it's different from AWS REST API ), when test we need to specify the Origin(should be same with your setting:Access-Control-Allow-Origin in cors, like: http://example.com) and the Request method. For example:

curl -v -X GET https://www.xxx.yy/foo/bar/  -H 'Origin:http://example.com' -H 'Access-Control-Request-Method: GET'

Then it would return the CORS header you had set in response header: access-control-allow-origin, access-control-allow-methods, access-control-allow-headers, etc.

I just hope this can save time for who met the similar problem. By the way, I hope AWS can update this test way to offical Document(it's not very useful, but most of people must be saw it before find real answer): https://docs.aws.amazon.com/apigateway/latest/developerguide/http-api-cors.html

Argentinaargentine

Answer 4

My issue was that I was sending this headers :
Access-Control-Allow-Origin
Access-Control-Allow-Methods
Access-Control-Allow-Credentials
From the web request and it was messing with the Access-Control-Allow-Headers. I removed them and it's fine now.

To debug CORS issue with AWS HTTP API, try to put a * in each field of the CORS configuration in the AWS Console and reconfigure each field one by one.

Pottle

Answer 5

So even though i was getting cors headers in my post call, browsers were still failing,,

My solution was

• explicitly create an OPTIONS route with same path {proxy+}
• attach same lambda integration to it
• have the lambda function return early with success headers

  if (method === 'OPTIONS') {
    return {
      headers: { 'Access-Control-Allow-Origin': '*' },
      statusCode: 200
    }
  }

Chirurgeon

Answer 6

tldr; x-api-key

It took some searching and trial and error, but I got CORS working for API Gateway HTTP API. For the very basic GET request from a jQuery ajax call here is what I had to do:

AWS Console CORS settings, needed Access-Control-Allow-Headers: x-api-key

Then, in my ajax call, I had to send a dummy x-api-key (I did not configure one, so not sure why it wants it.):

$.ajax ({
        url: 'https://xxxxxxx.execute-api.us-east-1.amazonaws.com/prod/stuff/',
        crossDomain: true,
        method: 'GET',
        headers: {
              "accept": "application/json",
              "X-Api-Key":"blablablalla"
          },
        success:function(data){
            doStuff(data);
        },
        error: function(){
            alert('error');
        }
    })

You may need additional configuration depending on your situation, but the x-api-key was what I narrowed down as the oddest undocumented requirement.

Villainous

Answer 7

I was testing from http://localhost:9000 using fetch for a POST request to an AWS API Gateway HTTP API endpoint and was getting that same error.

To solve it I configured CORS like this:

• Access-Control-Allow-Origin: http://localhost:9000
• Access-Control-Allow-Headers: content-type
• Access-Control-Allow-Methods: POST

In fetch I am sending 'content-type' header. Without putting that in 'Access-Control-Allow-Headers' it didn't work.

Remember to set the 'Access-Control-Allow-Origin' to whatever you need, both for testing and production.

Whorl

Answer 8

In my case it was something absolutely idiotic and I can't believe I lost hours of my life to this.

I had set up API Gateway with a Lambda proxy integration on a path /users, but my client code was incorrectly POST'ing to the /users/ resource (notice the trailing /). Once I removed the trailing / everything worked as expected.

Ceto