AWS API Gateway Lambda Reverse Proxy in Javascript: Cracking the Code for Returning Response Headers with Fetch

Are you tired of scratching your head over why your AWS API Gateway Lambda reverse proxy in Javascript isn’t returning response headers with the Fetch API? Well, buckle up, friend, because we’re about to dive into the solution to this pesky problem!

What’s the big deal about response headers?

Response headers are crucial in providing metadata about the response, such as caching, authentication, and cookies. Without them, your application might not function as intended, and you might end up with frustrated users and a bad reputation. So, let’s get down to business and figure out why Fetch isn’t playing nice with your AWS API Gateway Lambda reverse proxy.

The problem: Fetch and Lambda’s love-hate relationship

The Fetch API is a fantastic tool for making HTTP requests, but when it comes to integrating with AWS API Gateway Lambda, things can get a bit messy. By default, Fetch doesn’t send the necessary headers to Lambda, which means you won’t get the response headers you need. It’s like trying to make small talk with someone who doesn’t speak your language – it just doesn’t work!

const url = 'https://your-api-gateway.execute-api.us-east-1.amazonaws.com/dev/your-lambda-function';
fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

This code snippet looks innocent enough, but trust us, it’s a recipe for disaster. You’ll get the JSON response, but where are the response headers? Nowhere to be found!

The solution: Crafting the perfect Lambda function

To get those response headers, you need to modify your Lambda function to return them explicitly. Here’s the secret sauce:

exports.handler = async event => {
  const { headers, ...rest } = event;
  const response = await fetch('https://your-backend.com', {
    method: 'GET',
    headers: {
      ...headers,
      'X-Custom-Header': 'Custom header value',
    },
  });

  const responseHeaders = {
    'Content-Type': response.headers.get('Content-Type'),
    'X-Custom-Header': response.headers.get('X-Custom-Header'),
  };

  return {
    statusCode: response.status,
    headers: responseHeaders,
    body: await response.text(),
  };
};

In this revised Lambda function:

• We extract the incoming headers from the event object.
• We make the Fetch request with the necessary headers, including any custom ones you might need.
• We create a new responseHeaders object with the desired headers.
• We return a response object with the status code, headers, and body.

But wait, there’s more!

To ensure that API Gateway passes the response headers to the client, you need to configure the integration response. Follow these steps:

1. Navigate to your API Gateway dashboard and select the resource that invokes your Lambda function.
2. Click the “Integration Response” tab.
3. Scroll down to the “Method response” section and click the “Add integration response” button.
4. Select “Lambda Function” as the integration type.
5. In the “Integration Response” section, set the “Mapping template” to “application/json” and the “Content Handling” to “Passthrough.”
6. Click the “Add mapping template” button and enter the following code:

{
  "statusCode": 200,
  "headers": $input.headers,
  "body" : $input.json('$')
}

This mapping template tells API Gateway to pass the response headers from the Lambda function to the client.

The proof is in the pudding

Now, let’s update our Fetch request to see the response headers in action:

const url = 'https://your-api-gateway.execute-api.us-east-1.amazonaws.com/dev/your-lambda-function';
fetch(url)
  .then(response => {
    console.log(response.headers); // Ah, headers!
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

Run this code, and voilà! You should see the response headers in your console, complete with your custom headers.

Bonus tip: Dealing with CORS

If you’re using your API Gateway Lambda function with a web application, you might encounter CORS issues. To fix this, add the following code to your Lambda function:

responseHeaders['Access-Control-Allow-Origin'] = '*';
responseHeaders['Access-Control-Allow-Headers'] = 'Content-Type, Accept, Accept-Language, Accept-Encoding';
responseHeaders['Access-Control-Allow-Methods'] = 'GET, POST, PUT, DELETE, OPTIONS';

This will enable CORS for your API Gateway Lambda function, allowing cross-origin requests to succeed.

Conclusion

There you have it, folks! With these magical incantations, you’ve successfully conjured up an AWS API Gateway Lambda reverse proxy in Javascript that returns response headers with Fetch. Remember to modify your Lambda function to return the response headers explicitly, configure the integration response in API Gateway, and update your Fetch request to access those sweet, sweet headers.

Keyword	Description
AWS API Gateway	A fully managed service that makes it easy to create, publish, and manage APIs at scale.
Lambda	A serverless compute service that runs code in response to events, such as changes to an Amazon S3 bucket or an Amazon DynamoDB table.
Reverse Proxy	A server that sits between a client application and a target server, protecting the target server from the client and hiding its identity.
Fetch API	A modern replacement for XMLHttpRequest, providing a more intuitive and flexible way to make HTTP requests.

Now, go forth and conquer the world of serverless APIs! Remember, with great power comes great responsibility – so use your newfound knowledge wisely.

Here are 5 Questions and Answers about “AWS API Gateway Lambda Reverse Proxy in Javascript calling Fetch and returning the response headers does not work”:

Frequently Asked Question

Get answers to your burning questions about AWS API Gateway Lambda Reverse Proxy in Javascript!