Terraform API Gateway OPTIONS pre-flight not being communicated - axios

Question

I have an AWS API Gateway REST API with Lambda Proxy integration created with Terraform. The Lambdas perform CRUD operations on a DynamoDB table. Cognito User Pool Authorizer is set for anything that isn't a GET or OPTIONS request.
I've configured OPTIONS preflight as a MOCK integration in a Terraform module with Access-Control-Allow-Headers, Access-Control-Allow-Methods, Access-Control-Allow-Origin for all resources (modified from this article on Medium):
# api/cors/main.tf
resource "aws_api_gateway_method" "cors_method" {
rest_api_id = var.api_id
resource_id = var.resource_id
http_method = "OPTIONS"
authorization = "NONE"
}
resource "aws_api_gateway_method_response" "cors_method_response" {
rest_api_id = var.api_id
resource_id = var.resource_id
http_method = aws_api_gateway_method.cors_method.http_method
status_code = "200"
response_models = {
"application/json" = "Empty"
}
response_parameters = {
"method.response.header.Access-Control-Allow-Headers" = true
"method.response.header.Access-Control-Allow-Methods" = true,
"method.response.header.Access-Control-Allow-Origin" = true,
}
depends_on = [aws_api_gateway_method.cors_method]
}
resource "aws_api_gateway_integration" "cors_integration" {
rest_api_id = var.api_id
resource_id = var.resource_id
http_method = aws_api_gateway_method.cors_method.http_method
type = "MOCK"
depends_on = [aws_api_gateway_method.cors_method]
}
resource "aws_api_gateway_integration_response" "cors_integration_response" {
rest_api_id = var.api_id
resource_id = var.resource_id
http_method = aws_api_gateway_method.cors_method.http_method
status_code = aws_api_gateway_method_response.cors_method_response.status_code
response_parameters = {
"method.response.header.Access-Control-Allow-Headers" = "'${join(",", var.headers)}'"
"method.response.header.Access-Control-Allow-Methods" = "'${join(",", var.methods)}'",
"method.response.header.Access-Control-Allow-Origin" = "'${join(",", var.origins)}'",
}
depends_on = [aws_api_gateway_method_response.cors_method_response]
}
# api/cors/variables.tf
variable "api_id" {}
variable "resource_id" {}
variable "origins" {
type = list(string)
default = ["http://localhost:3000"]
}
variable "methods" {
type = list(string)
}
variable "headers" {
type = list(string)
default = ["Content-Type", "X-Amz-Date", "Authorization", "X-Api-Key", "X-Amz-Security-Token"]
}
# api/main.tf
# API, other API resources, deployment, stage also defined here
# /users/{username}/follow
resource "aws_api_gateway_resource" "follow" {
rest_api_id = aws_api_gateway_rest_api.api.id
parent_id = aws_api_gateway_resource.username.id
path_part = "follow"
}
module "FollowCORS" {
source = "./cors"
api_id = aws_api_gateway_rest_api.api.id
resource_id = aws_api_gateway_resource.follow.id
methods = ["DELETE", "OPTIONS", "PUT"]
}
All Lambda functions return the same response headers as OPTIONS:
// Lambda for this endpoint/method
const AWS = require('aws-sdk');
// Set up DynamoDB DocumentClient
exports.handler = async (event) => {
let body = {};
let statusCode = 200;
const headers = {
'Access-Control-Allow-Headers':
'Accept,Authorization,Content-Type,X-Amz-Date,X-Amz-Security-Token',
'Access-Control-Allow-Methods': 'DELETE,OPTIONS,PUT',
'Access-Control-Allow-Origin': '*', // temporary update as per suggestion
'Content-Type': 'application/json',
Vary: 'Origin',
};
// original `Access-Control-Allow-Origin` setting
// const allowedOrigins = ['http://localhost:3000'];
// const origin = event.headers.origin || '';
// if (allowedOrigins.includes(origin)) {
// headers['Access-Control-Allow-Origin'] = origin;
// }
console.log('Event:\n', event);
// Check/Get `cognito:username` from event
try {
// DELETE operation on DynamoDB table
body.isFollowing = false;
} catch (err) {
console.error('Error:\n', err);
statusCode = 500;
body = { error: { message: err.message } };
}
return { statusCode, headers, body: JSON.stringify(body) };
};
I'm able to successfully interact with all endpoints via Postman and can make GET requests from my Next.js app (useSWR, fetch, axios all OK).
The problem is I can't make any other requests (DELETE, PATCH, POST, PUT) with axios or fetch:
axios
.delete(`${API_BASE_URL}/users/testuser/follow`, {
headers: {
Authorization: `Bearer ${id_token}`,
},
})
.then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error);
});
fetch(`${API_BASE_URL}/users/testuser/follow`, {
method: 'DELETE',
headers: {
Authorization: `Bearer ${id_token}`,
},
})
.then((res) => res.json())
.then((data) => {
console.log(data);
});
where API_BASE_URL is https://${API_ID}.execute-api.{REGION}.amazonaws.com/{STAGE}. The item I'm attempting to DELETE does exist (created via Postman since PUT request also fails with same error).
I get the following error:
Access to fetch at 'https://{API_BASE_URL}/users/testuser/follow' from origin 'http://localhost:3000' 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.
I also get the
TypeError: Failed to fetch
when the fetch request fails.
The calls made via axios and fetch don't seem to even hit the API because no CloudWatch logs get created.
Also, the axios request headers shown in the Network tab only have Referer: http://localhost:3000/ but no Origin: http://localhost:3000. No response headers are shown:
As suggested in the comments, I tested the OPTIONS method for this endpoint with Postman, but get the following error:
... not a valid key=value pair (missing equal-sign) in Authorization header ...
I know this error appears when there are other issues (e.g. wrong method used), so I'm guessing something is wrong with my preflight config.
The same error occurs for all other endpoints and methods.
What's blocking these requests from being made?
Postman response headers for DELETE request
Terraform v1.2.7 on windows_amd64
hashicorp/aws version ~> 4.26

Answer 1

To anyone else experiencing this issue (and using Terraform), before you spend days headbanging your keyboard, did you try turning it off and on again? terraform destroy, then terraform apply.
I did also make modifications to my code, so I can't provide the satisfaction of pointing to a line number and saying that was the issue. It seems the changes weren't being deployed properly until I "turned it off, then on again".
Alas, the following is a condensed version of my updated code with the changes indicated:
Terraform
terraform {
required_providers {
aws = {
source = "hashicorp/aws"
version = "~> 4.26"
}
}
}
provider "aws" {
profile = "default"
region = "ca-central-1"
}
# Cognito
# ...
# Rest API
resource "aws_api_gateway_rest_api" "test_api" {
name = "test_api"
description = "Test REST API"
endpoint_configuration {
types = ["REGIONAL"]
}
}
resource "aws_api_gateway_authorizer" "authorizer" {
name = "CognitoUserPoolAuthorizer"
rest_api_id = aws_api_gateway_rest_api.test_api.id
identity_source = "method.request.header.Authorization"
type = "COGNITO_USER_POOLS"
provider_arns = ["${aws_cognito_user_pool.user_pool.arn}"]
}
resource "aws_api_gateway_resource" "test_resource" {
rest_api_id = aws_api_gateway_rest_api.test_api.id
parent_id = aws_api_gateway_rest_api.test_api.root_resource_id
path_part = "test"
}
# Lambda Proxy
resource "aws_api_gateway_method" "test_method" {
rest_api_id = aws_api_gateway_rest_api.test_api.id
resource_id = aws_api_gateway_resource.test_resource.id
http_method = "POST"
authorization = "COGNITO_USER_POOLS"
authorizer_id = aws_api_gateway_authorizer.authorizer.id
}
resource "aws_api_gateway_method_response" "test_method_response" {
rest_api_id = aws_api_gateway_rest_api.test_api.id
resource_id = aws_api_gateway_resource.test_resource.id
http_method = aws_api_gateway_method.test_method.http_method
# -------------------------------------------------------------------------
# 1. Changed value from `string` to `int` ("200" -> `200`)
# -------------------------------------------------------------------------
status_code = 200
response_parameters = {
"method.response.header.Access-Control-Allow-Origin" = true,
}
depends_on = [aws_api_gateway_method.test_method]
}
resource "aws_lambda_function" "test_handler" {
function_name = "test_handler"
handler = "index.handler"
runtime = "nodejs16.x"
filename = "../lambda/index.zip"
source_code_hash = filebase64sha256("../lambda/index.zip")
role = aws_iam_role.test_lambda_role.arn
memory_size = "128"
timeout = "5"
}
resource "aws_iam_role" "test_lambda_role" {
name = "test_lambda_role"
assume_role_policy = jsonencode({
Version = "2012-10-17"
Statement = [{
Action = "sts:AssumeRole"
Effect = "Allow"
Sid = ""
Principal = {
Service = "lambda.amazonaws.com"
}
}]
})
}
resource "aws_iam_policy" "test_lambda_policy" {
name = "test_lambda_policy"
path = "/"
policy = jsonencode({
Version = "2012-10-17"
Statement = [
{
Effect = "Allow"
Action = ["logs:CreateLogStream", "logs:CreateLogGroup", "logs:PutLogEvents"]
Resource = "arn:aws:logs:ca-central-1:*:*"
}
]
})
}
resource "aws_iam_role_policy_attachment" "lambda_role_policy" {
role = aws_iam_role.test_lambda_role.name
policy_arn = aws_iam_policy.test_lambda_policy.arn
}
resource "aws_api_gateway_integration" "test_integration" {
rest_api_id = aws_api_gateway_rest_api.test_api.id
resource_id = aws_api_gateway_method.test_method.resource_id
http_method = aws_api_gateway_method.test_method.http_method
integration_http_method = "POST"
type = "AWS_PROXY"
uri = aws_lambda_function.test_handler.invoke_arn
depends_on = [aws_api_gateway_method.cors_method, aws_lambda_function.test_handler]
}
resource "aws_lambda_permission" "test_permission" {
action = "lambda:InvokeFunction"
function_name = aws_lambda_function.test_handler.function_name
principal = "apigateway.amazonaws.com"
# -------------------------------------------------------------------------
# 2. Updated `source_arn` to be more specific
# previously `${aws_api_gateway_rest_api.test_api.execution_arn}/*/*/*}`
# the remaining `*` enables permissions for all API stages
# -------------------------------------------------------------------------
source_arn = "${aws_api_gateway_rest_api.test_api.execution_arn}/*/${aws_api_gateway_method.test_method.http_method}${aws_api_gateway_resource.test_resource.path}"
}
# CORS
resource "aws_api_gateway_method" "cors_method" {
rest_api_id = aws_api_gateway_rest_api.test_api.id
resource_id = aws_api_gateway_resource.test_resource.id
http_method = "OPTIONS"
authorization = "NONE"
}
resource "aws_api_gateway_method_response" "cors_method_response" {
rest_api_id = aws_api_gateway_rest_api.test_api.id
resource_id = aws_api_gateway_resource.test_resource.id
http_method = aws_api_gateway_method.cors_method.http_method
# -------------------------------------------------------------------------
# 3. Changed `status_code` value from `string` to `int` ("200" -> `200`)
# -------------------------------------------------------------------------
status_code = 200
response_models = {
"application/json" = "Empty"
}
response_parameters = {
# -------------------------------------------------------------------------
# 4. Added Access-Control-Allow-Credentials
# calls with `Authorization` header fail without this
# -------------------------------------------------------------------------
"method.response.header.Access-Control-Allow-Credentials" = true,
"method.response.header.Access-Control-Allow-Headers" = true
"method.response.header.Access-Control-Allow-Methods" = true,
"method.response.header.Access-Control-Allow-Origin" = true,
}
depends_on = [aws_api_gateway_method.cors_method]
}
resource "aws_api_gateway_integration" "cors_integration" {
rest_api_id = aws_api_gateway_rest_api.test_api.id
resource_id = aws_api_gateway_resource.test_resource.id
http_method = aws_api_gateway_method.cors_method.http_method
type = "MOCK"
# -------------------------------------------------------------------------
# 5. Added `request_templates`
# -------------------------------------------------------------------------
request_templates = {
"application/json" = "{ \"statusCode\": 200 }"
}
depends_on = [aws_api_gateway_method.cors_method]
}
resource "aws_api_gateway_integration_response" "cors_integration_response" {
rest_api_id = aws_api_gateway_rest_api.test_api.id
resource_id = aws_api_gateway_resource.test_resource.id
http_method = aws_api_gateway_method.cors_method.http_method
status_code = aws_api_gateway_method_response.cors_method_response.status_code
# careful with double/single quotes here
response_parameters = {
# -------------------------------------------------------------------------
# 6. Added Access-Control-Allow-Credentials
# calls with `Authorization` header fail without this
# -------------------------------------------------------------------------
"method.response.header.Access-Control-Allow-Credentials" = "'true'"
# -------------------------------------------------------------------------
# 7. Simplified `Access-Control-Allow-Headers` to `Authorization,Content-Type` for methods with
# `COGNITO_USER_POOLS` authorization and `Content-Type` only for methods without authorization
# -------------------------------------------------------------------------
"method.response.header.Access-Control-Allow-Headers" = "'Authorization,Content-Type'"
"method.response.header.Access-Control-Allow-Methods" = "'OPTIONS,POST'",
"method.response.header.Access-Control-Allow-Origin" = "'${join(",", ["http://localhost:3000"])}'",
}
depends_on = [aws_api_gateway_method_response.cors_method_response]
}
resource "aws_api_gateway_deployment" "test_deployment" {
rest_api_id = aws_api_gateway_rest_api.test_api.id
depends_on = [aws_api_gateway_integration.test_integration]
}
resource "aws_api_gateway_stage" "api_stage" {
deployment_id = aws_api_gateway_deployment.test_deployment.id
rest_api_id = aws_api_gateway_rest_api.test_api.id
stage_name = "dev"
}
# CloudWatch
# ...
Lambda
exports.handler = async (event) => {
let body = {};
let statusCode = 200;
// 8. Return same `Access-Control-Allow-Headers` as `Integration Response`
const headers = {
'Access-Control-Allow-Credentials': true,
'Access-Control-Allow-Headers': 'Authorization,Content-Type',
'Access-Control-Allow-Methods': 'OPTIONS,POST',
'Content-Type': 'application/json',
Vary: 'Origin',
};
const allowedOrigins = ['http://localhost:3000'];
const origin = event.headers?.origin || '';
if (allowedOrigins.includes(origin)) {
headers['Access-Control-Allow-Origin'] = origin;
}
console.log('Event:\n', event);
const currentUsername = event.requestContext.authorizer.claims['cognito:username'] || '';
if (!currentUsername) {
statusCode = 401;
body = JSON.stringify({ error: { message: 'Unauthorized' } });
return { statusCode, headers, body };
}
const payload = JSON.parse(event.body);
if (!payload.test) {
statusCode = 400;
body = JSON.stringify({ error: { message: 'Invalid input' } });
return { statusCode, headers, body };
}
body.greeting = `Hello from the other side, ${currentUsername}`;
body.test = payload.test;
return { statusCode, headers, body: JSON.stringify(body) };
};
Prior to the issue being fixed, I noticed the API endpoint for the Lambda's API Gateway trigger (Using the AWS Console: Lambda > Functions > function_name > Configuration > Triggers) had the following error:
The API with ID API_ID doesn’t include a resource with path /* having an integration arn:aws:lambda:REGION:ACCOUNT_ID:function:FUNCTION_NAME on the ANY method.
whereas now there is a clickable link with the complete resource path (as per updated aws_lambda_permission Terraform config). I'm not sure how much this was contributing to the problem.
May the CORS be with you.

Answer 2

You need to ensure the "Access-Control-Allow-Origin" field in the lambda header response matches the OPTIONS response. It could be worth setting them both to * temporarily to check there are no other issues...
Lambda response header:
'headers': {
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*"
},
OPTIONS response:
{
"Access-Control-Allow-Headers": ["Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token"],
"Access-Control-Allow-Methods": ["DELETE,OPTIONS,PUT"],
"Access-Control-Allow-Origin": ["*"],
"Content-Type":["application/json"]
}
Also it would be interesting to see the response you get hitting the endpoint from POSTMAN. It's possible that the gateway Integration Response isn't passing through the lambda header values, and needs to be configured.