CODEWITHSUNDEEP
javascriptjqueryajaxamazon-web-servicesaws-lambda
Joos Korstanje
Joos Korstanje

Reputation: 194

Ajax call using jQuery to AWS lambda function in Python


I'm trying to get my head around ajax calls and aws lambda, but I've been struggling for hours with the most simple example I could think of: just to have javascript / jquery do an ajax call to lambda, have lambda return the text 'blah' and then print that in an alert in my browser.

Please help!

I have created a lambda function with post that seems to work (when I go to the url in my browser, I see blahh in my browser):

def lambda_handler(a, b):
    return({
        "isBase64Encoded": True,
        "statusCode": 200,
        "headers": { "headerName": "headerValue"},
        "body": "blahhh"
    })

And my html file is as follows:

<!doctype html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>  
</head>

<body>
  <script> window.alert( "before" ); </script>
  <script>
    $.ajax(
        {
        url: 'https://npvkf9jnqb.execute-api.us-east-1.amazonaws.com/v1',
        type:'GET',
        dataType: 'text',
        success: function(data) {
            window.alert(data);
        }
    });


    window.alert( "after" );
    </script>

</body>
</html>

My API Gateway settings are: a GET method (and a POST with the same configuration) with intergration type Lambda Function, Using Lambda Integration, in the region us east 1, pointing to mylambdafunction (which is written above). All the rest is on default. I did enabe CORS.

The logs look like a continuous repetition of the following:

START RequestId: 40847960-c98f-11e8-9191-818092ca5731 Version: $LATEST
END RequestId: 40847960-c98f-11e8-9191-818092ca5731
REPORT RequestId: 40847960-c98f-11e8-9191-818092ca5731  Duration: 0.37 ms    
Billed Duration: 100 ms Memory Size: 128 MB Max Memory Used: 21 MB  
START RequestId: 499d769b-c990-11e8-8ba2-2568c94a15d7 Version: $LATEST
END RequestId: 499d769b-c990-11e8-8ba2-2568c94a15d7
REPORT RequestId: 499d769b-c990-11e8-8ba2-2568c94a15d7  Duration: 1.18 ms    
Billed Duration: 100 ms Memory Size: 128 MB Max Memory Used: 21 MB  
.....

But when I open the .html file in my browser it doesn't seem to succeed the ajax part. What am I missing? Any help is welcome, since I'm a complete beginner at this!

Upvotes: 1

Views: 5133

Answers (2)

Joos Korstanje
Joos Korstanje

Reputation: 194

I will summarize the solution I found in thee steps for the error:

Failed to load https://npvkf9jnqb.execute-api.us-east-1.amazonaws.com/v1: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. in case anyone has the same problem.

1 - Cors has to be enabled and it is necessary to specify 'Access-Control-Allow-Origin':'*' This is by default. This setting can be found in AWS API Gateway settings.

2 -The Ajax call should contain the header 'Access-Control-Allow-Origin':'*'. This is inside the html file.

$.ajax(
{
    url: 'https://npvkf9jnqb.execute-api.us-east-1.amazonaws.com/v1',
    headers: {'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*'
},
    crossDomain: true,
    type:'GET',
    dataType: 'text',
    success: function(data)
    {
        window.alert(data);
    }
});

3 - The Lambda function also needs to return the header 'Access-Control-Allow-Origin':'*'. This should be done in AWS Lambda.

def lambda_handler(a, b):
    return({
    "isBase64Encoded": True,
    "statusCode": 200,
    "headers": { 'Access-Control-Allow-Origin': '*'},
    "body": "blahhh"
    })

Upvotes: 1

markt
markt

Reputation: 903

You are missing a comma after type: 'POST'

$.ajax(
    {
    url: 'https://npvkf9jnqb.execute-api.us-east-1.amazonaws.com/v1',
    type:'POST',
    dataType: 'text',
    success: function(data) {
        window.alert(data);
    }
});

Upvotes: 1

Related Questions