AWS API Gateway No 'Access-Control-Allow-Origin' header is present

Question

I'm stuck on an issue with API gateway and I've gone through all the other SO answers on this, AWS forums and have been through their docs but still no joy.

I am trying to setup an API using AWS API gateway which calls a Lambda function which reads/writes to a table in DynamoDB.

The Lambda function to DynamoDB is working. I have created an API in AWS, and created a GET and OPTIONS methods for it. I read AWS does not enforce the OPTIONS for only GET/POST but i was getting a preflight error in my ajax call when there was no OPTIONS method so I added one.

For now just to make progress I am not using an API key or Authorization. I can successfully call my GET method using POSTMAN, which returns the contents of the DynamoDB table.

But when i try using a JQuery ajax call i get

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

I can see using Chrome dev tools under the network tab, the OPTIONS method returning status 200 and the GET returns status 200 but with the above error.

I have tried enabling CORS on both the OPTIONS and GET methods, have re-deployed the API after every change, have tried the following (http://enable-cors.org/server_awsapigateway.html) but always get the same error in the console.

I am executing the ajax call from a file on my desktop so origin is null as the page will be deployed to S3 as its a single web page application in JS.

When I enabled CORS on my GET and OPTIONS i can see that Access-Control-Allow-Headers is 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token' and Access-Control-Allow-Origin* is '*'

My Ajax call looks like below. I also tried copying the exact headers POSTMAN uses, which has the Authorization header set (which i have turned off in AWS for now) but i always get the same error above

var awsHeaders = {};
awsHeaders['X-Amz-Date'] = '20161127T171734';

$('#add, #cloud').click(function() {

    $.ajax({

        type: 'GET',
        headers: awsHeaders,
        dataType : "json",
        url: '...',
        success: function (res) {

            console.log('response in GET:');
            console.log(res);

        },
        error: function(data) {
            console.log('in error');
            console.log(data);
        }

    });

});

Can anyone shed light on what i might be missing?

Many thanks

Update See answer below regarding how I solved this as per DigitalKapteain comments - by setting the 'Access-Control-Allow-Origin':'*' header in the response from my Lambda function. I looked for this in the AWS docs but couldn;t find it. This link describes the difference between Lambda and Lambda Proxy and explains what to do when using CORS https://serverless.com/framework/docs/providers/aws/events/apigateway/

Solution 1

The response for the GET request to the Lambda function must also contain the Access-Control-Allow-Originheader.

Solution 2

Digitalkapitaen's answer is correct; here is the code to save someone the trouble of looking up how to set an HTTP response header in Lambda:

exports.handler = function(event, context, callback) {
    callback(null, {
        "statusCode": 200,
        "headers": { 
            "Access-Control-Allow-Origin": "*" 
        }
    });
};

Solution 3

If this is still not working for you, be sure to JSON.stringify() your json object if you are using $.ajax. If not, you will still be returned an error that claims to be a CORS-related error. But if you send the same json object using Postman, the request will succeed. Try it out...