Configuring CORS for the API Gateway in SAM / CloudFormation / Swagger

Question

I followed the example from here , which includes a swagger file for CORS + SAM configuration. It looks like I still get the CORS error if I don't add the CORS headers manually in each function:

callback(null, { statusCode: '200', headers: { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Headers': 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token', 'Access-Control-Allow-Methods': 'OPTIONS,GET,POST,PUT,PATCH,DELETE' }, body: JSON.stringify({message: "Hello world"}) }); 

It is right? Or am I doing something wrong?

Answer 1

All AWS documents suggest that you specify these 3 headers in each resource of the API gateway and return them in each response of the function that CORS will support, you can see that they needed to add these 3 headers to the specified endpoints of the 2 API gateways in the swagger project example .yaml file.

The Github example above uses what is called a proxy resource in API Gateway , basically a API Gatewaty route that will match any request made in the api and run the lambda proxy function using request parth, method ..., etc. d. You can learn more about how this works here .

You can try something like serverless , which will help you better organize your lambda functions, as SAM does. It also supports CORS .

Answer 2

You need to cover two bases for successful work of CORS (for example, with swaggerdoc / chrome)

For each path you use:

• Have an OPTIONS answer defining which methods you are processing
• Access-Control-Allow-Origin header title will be returned when your actual method is called

Currently, I have found the simplest solution: 1. The presence of the OPTIONS part processed by the GW mock API 2. The header is added to the unmocked GW API responses

So, if you support the path "/ fred" with GET and POST:

        "/ fred" {
           "options": {
             "consumes": [
               "application / json"
             ],
             "produces": [
               "application / json"
             ],
             "responses": {
               "200": {
                 "description": "Success",
                 "schema": {
                   "$ ref": "# / definitions / Empty"
                 },
                 "headers": {
                   "Access-Control-Allow-Origin": {
                     "type": "string"
                   },
                   "Access-Control-Allow-Methods": {
                     "type": "string"
                   },
                   "Access-Control-Allow-Headers": {
                     "type": "string"
                   }
                 }
               }
             },
             "x-amazon-apigateway-integration": {
               "responses": {
                 "default": {
                   "statusCode": "200",
                   "responseParameters": {
                     "method.response.header.Access-Control-Allow-Methods": "'GET, POST, OPTIONS'",
                     "method.response.header.Access-Control-Allow-Headers": "'Content-Type, X-Amz-Date, Authorization, X-Api-Key, X-Amz-Security-Token'",
                     "method.response.header.Access-Control-Allow-Origin": "'*'"
                   }
                 }
               },
               "requestTemplates": {
                 "application / json": "{\" statusCode \ ": 200}"
               },
               "passthroughBehavior": "when_no_match",
               "type": "mock"
             }
        }

Then in your actual processor you need to make sure that you have the header "Access-Control-Allow-Origin"

      "post": {
        "responses": {
               "200": {
                 "description": "Success",
                 "schema": {
                   "$ ref": "# / definitions / myrecord"
                 },
                 "headers": {
                   "Access-Control-Allow-Origin": {
                     "type": "string"
                   }
                 },
       .....


        "x-amazon-apigateway-integration": {
          "default": {
                   "statusCode": "200",
                   "responseParameters": {
                     "method.response.header.Access-Control-Allow-Origin": "'*'"
                   },
                   "responseTemplates": {
                     "application / json": "......"
                   }
                 }

         .....

Please note that you also need to return this header to error messages and

Answer 3

We had similar problems when we use * in Allow-Origin.

You cannot use a wildcard in Access-Control-Allow-Origin when the credential flag is true.

Replace

  'Access-Control-Allow-Origin': '*', 

With the request you are requesting,

  'Access-Control-Allow-Origin': 'http://localhost:8000', 

or whatever your url is.

You also need to specify the port number in the returns headers. It also includes http or https.

If you want to automate, get the referr URL, which you can whitelist and pass the protocol, host, part of the referrer port.

Hope this helps.