如何配置AWS API Gateway向Lambda传递查询参数并规避CORS错误？

Got it, let's break down your problem and fix it step by step—I've run into this exact issue before, so here's what works:

Core Issue Explanation #

The root of your problem is how CORS and request data are handled with/without Lambda Proxy Integration:

• Without proxy integration: API Gateway handles CORS headers for you, but it doesn't automatically pass query params or request bodies to Lambda unless you explicitly set up mapping templates. That's why your Lambda gets an empty event object.
• With proxy integration: API Gateway passes all request data directly to Lambda (including query params), but it stops handling CORS headers—your Lambda function has to return those headers in its response. That's why you're seeing the CORS error even after enabling it in API Gateway.

Recommended Solution: Use Lambda Proxy Integration (Simpler Long-Term) #

This is the most straightforward approach once you fix the CORS header issue in your Lambda.

Step 1: Double-Check API Gateway CORS Setup #

First, confirm you've enabled CORS correctly in API Gateway:

• Go to your API in the AWS Console, select the resource (like /gettest8), and click Enable CORS.
• Check the boxes for the methods you need (GET, POST) and set the allowed origin (use * for testing, but replace with your actual frontend domain in production).
• Click Enable CORS and replace existing CORS headers—this creates an OPTIONS method to handle preflight requests (critical for POST requests from browsers).

Step 2: Update Lambda to Return CORS Headers #

Your Lambda must include the required CORS headers in its response. Here are examples for both GET and POST:

GET Request Example (Node.js)

exports.handler = async (event) => {
    // Access query string params directly from event
    const queryParams = event.queryStringParameters;
    console.log("Received query params:", queryParams);

    // Add your business logic here

    // Return response with CORS headers
    return {
        statusCode: 200,
        headers: {
            "Access-Control-Allow-Origin": "*", // Replace with your frontend origin in production
            "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
            "Access-Control-Allow-Headers": "Content-Type"
        },
        body: JSON.stringify({ message: "GET request successful", params: queryParams })
    };
};

POST Request Example (Node.js)

exports.handler = async (event) => {
    // Parse the JSON body (adjust if your client sends form data instead)
    const requestBody = JSON.parse(event.body);
    console.log("Received POST data:", requestBody);

    // Add your business logic here

    // Return response with CORS headers
    return {
        statusCode: 200,
        headers: {
            "Access-Control-Allow-Origin": "*", // Replace with your frontend origin in production
            "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
            "Access-Control-Allow-Headers": "Content-Type"
        },
        body: JSON.stringify({ message: "POST request successful", data: requestBody })
    };
};

Step 3: Deploy Your API #

Don't forget to deploy your API to your stage (like prod)—API Gateway won't apply any changes until you do this.

Alternative Solution: No Lambda Proxy Integration #

If you prefer not to use proxy integration, you'll need to set up mapping templates to pass data to Lambda, while letting API Gateway handle CORS.

Step 1: Enable CORS (Same as Above) #

Ensure CORS is enabled for your resource in API Gateway—this will make API Gateway add the necessary headers to responses.

Step 2: Configure Mapping Templates #

For each method, set up a template to pass query params or request body to Lambda:

• GET Method:
  1. Go to your GET method's Integration Request.
  2. Under Mapping Templates, add a template for application/json.
  3. Paste this template to pass query params:

     {
         "queryParams": "$input.params().querystring"
     }
     

• POST Method:
  1. Go to your POST method's Integration Request.
  2. Add a template for application/json.
  3. Paste this template to pass the request body:

     {
         "body": $input.json('$')
     }
     

Step 3: Update Lambda to Read Mapped Data #

Your Lambda event will now have the data you mapped:

exports.handler = async (event) => {
    // For GET: use event.queryParams
    // For POST: use event.body
    const data = event.queryParams || event.body;

    return {
        statusCode: 200,
        body: JSON.stringify({ message: "Success", data: data })
    };
};

Step 4: Deploy Your API #

Again, deploy to apply the mapping template changes.

Quick Troubleshooting Tips #

• Test with Postman first: Use Postman to call your API—if it works but your browser doesn't, it's definitely a CORS header issue.
• Avoid using * in production: Replace * with your actual frontend domain (like https://your-app.com) to lock down CORS securely.
• Check preflight requests: For POST, browsers send an OPTIONS request first—make sure the OPTIONS method created by API Gateway is working (you can test this in Postman too).

Content of the question来源于stack exchange，提问作者pyBristow