Zappa Option for Enabling Cross-Origin Resource Sharing

[AusIV]

I'm building an application that I want to have IAM authenticated and accessed through a browser. I have my browser application set up to properly sign requests to IAM authenticated APIs, but there's a problem. The browser does pre-flight OPTIONS requests to the same URL as the XHR request, but there's no way to get the browser to sign the pre-flight request. So if the entire API is IAM authenticated, the pre-flight request will fail authentication and be rejected, at which point the browser will decide it shouldn't allow cross-origin requests for this URL.

This can be resolved manually by enabling CORS with some manual steps after doing the Zappa deployment (outlined here).

Those manual steps can pretty easily be taken care of in the CloudFormation template by adding a section along the lines of:

"OPTIONS0": {
  "Type": "AWS::ApiGateway::Method",
  "Properties": {
    "ResourceId": {
      "Fn::GetAtt": [
        "Api",
        "RootResourceId"
      ]
    },
    "RestApiId": {
      "Ref": "Api"
    },
    "AuthorizationType": "NONE",
    "HttpMethod": "OPTIONS",
    "Integration": {
      "Type": "MOCK",
      "IntegrationResponses": [
        {
          "ResponseParameters": {
            "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-Methods": "'GET,POST,OPTIONS'",
            "method.response.header.Access-Control-Allow-Origin": "'*'"
          },
          "ResponseTemplates": {
            "application/json": ""
          },
          "StatusCode": "200"
        }
      ],
      "PassthroughBehavior": "NEVER",
      "RequestTemplates": {
        "application/json": "{\"statusCode\": 200}"
      }
    },
    "MethodResponses": [
      {
        "ResponseModels": {
          "application/json": "Empty"
        },
        "ResponseParameters": {
          "method.response.header.Access-Control-Allow-Headers": true,
          "method.response.header.Access-Control-Allow-Methods": true,
          "method.response.header.Access-Control-Allow-Origin": true
        },
        "StatusCode": "200"
      }
    ]
  }
},
"OPTIONS1": {
  "Type": "AWS::ApiGateway::Method",
  "Properties": {
    "ResourceId": {
      "Ref": "ResourceAnyPathSlashed"
    },
    "RestApiId": {
      "Ref": "Api"
    },
    "AuthorizationType": "NONE",
    "HttpMethod": "OPTIONS",
    "Integration": {
      "Type": "MOCK",
      "IntegrationResponses": [
        {
          "ResponseParameters": {
            "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-Methods": "'GET,POST,OPTIONS'",
            "method.response.header.Access-Control-Allow-Origin": "'*'"
          },
          "ResponseTemplates": {
            "application/json": ""
          },
          "StatusCode": "200"
        }
      ],
      "PassthroughBehavior": "NEVER",
      "RequestTemplates": {
        "application/json": "{\"statusCode\": 200}"
      }
    },
    "MethodResponses": [
      {
        "ResponseModels": {
          "application/json": "Empty"
        },
        "ResponseParameters": {
          "method.response.header.Access-Control-Allow-Headers": true,
          "method.response.header.Access-Control-Allow-Methods": true,
          "method.response.header.Access-Control-Allow-Origin": true
        },
        "StatusCode": "200"
      }
    ]
  }
},

I'm currently working on a pull-request to add an "enable_cors" option to the Zappa config that will inject the OPTIONS sections into the CloudFormation template created with troposhere. I just have a few more things to test before I submit it.

[AusIV]

It should also be noted that simply enabling CORS at the API gateway layer is necessary but not sufficient for an application that wants to do CORS requests against a Zappa API that is IAM authenticated (and likely authenticated using other API-gateway level authenticators). The application itself will still need to respond with the appropriate CORS related headers, but it doesn't get the opportunity to do that if API Gateway blocks the pre-flight request.

[Miserlou]

This is a fantastic issue, diagnosis and solution. I look forward to merging your Pull Request!

[Miserlou]

👍