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/
The response for the GET request to the Lambda function must also contain the Access-Control-Allow-Origin
header.