MAKE A CALL TO A REST API WITH QUERYSTRING PARAMETERS

0

Please guys, I am really frustrated as all I want is simple. I have watched videos, read articles regarding it. It seems it doesnt work for only me. So I have have an api gateway created in the console that accepts a query string parameter called name. I have a lambda function that just returns the event.queryStringParameters.name in the response body. I have created a resource, and created a GET method, that has the lambda function as the method to execute when this GET method api url is hit (with the passed in name querystring. On checking with proxy integration, everything works fine when you manually type in the api endpoint in the browser window. for example apiurl/?name=passedinparameter. However on calling this api from w3schools (using javascript fetch), I get blocked by CORS policy. I have watched videos upon videos and done exactly what i saw in these videos. I still get blocked.

On creating without proxy integration, a call to the api from browser address bar throws an error that the parameter is undefined. Please help me.

All i want to do is create an api that accepts parameters, call this api from either my local IDE or anywhere else with the passed in parameters and receive a response. Thats all

1 Answer
1

From what I understand, your problem has multiple layers.

Lambda without Proxy Integration

According to the proxy integration documentation, the event object is prepared for you by the proxy integration in the way you said: Set up Lambda proxy integrations in API Gateway.

Without the proxy integration, please consider that the handler gets different content in event object. This would lead to your problem "throws an error that the parameter is undefined".

So for now let's go with Proxy Integration and see about the CORS Problem.

CORS Problem

A GET request is considered a "simple request" in matters of CORS. I found the MDN documentation about CORS very helpful (read from top to bottom once, totally took away the "magic appearance" from CORS): MDN Cross-Origin Resource Sharing (CORS).

Your HTTP response must contain an Allow-Control-Allow-Origin HTTP Header. AWS Documentation should give you more directions: Enabling CORS support for proxy integrations.

export const handler = async (event) => {
    const response = {
        statusCode: 200,
        headers: {
            "Access-Control-Allow-Headers" : "Content-Type",
            "Access-Control-Allow-Origin": "https://www.example.com",
            "Access-Control-Allow-Methods": "OPTIONS,POST,GET"
        },
        body: JSON.stringify('Hello from Lambda!'),
    };
    return response;
};

-- from Enabling CORS support for proxy integrations

I hope this can somewhat shed some light on your situation!

profile picture
answered 3 months ago
  • Thank you. this worked for me. I had to add the "Access-Control-Allow-Origin" to the header object in the response returned. Then I easily used the function with Lambda proxy integration without having to worry about mapping or templating.

  • Awesome! Happy I could help!

  • Hey jay, one more thing. Since the answer was working for you, I would kindly ask you to mark it as "Accepted answer" if possible. :-)

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions