Cross origin resource sharing in AWS lambda proxy integration - amazon-web-services

Question

Been browsing through SO for the past hours to find a fix for my issue, but no progress yet, I'm getting
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Now typically, this could be fixed with adding appropriate headers to the code, and it would work, however it's not the case for me, since I've tried to configure cors through API Gateway on AWS.
Screenshot:
Some research on google mentioned, that if the function is using lambda proxy integration, we would have to modify the lambda itself, and add the headers by our own, e.g
headers: {
'Access-Control-Allow-Origin': '*',
},
However this doesn't make much difference, is there anything I'm missing?
My actual code for the lambda (forgot to add):
const rp = require('request-promise')
const sendEmail = require('./sendEmail')
module.exports.run = async (event, context, callback) => {
const body = JSON.parse(event.body)
const { name, email, budget, message, attachment } = body
if (!name) {
return callback(null, {
statusCode: 400,
body: JSON.stringify({ message: 'Name is required' }),
})
}
if (!email) {
return callback(null, {
statusCode: 400,
body: JSON.stringify({ message: 'Email address is required' }),
})
}
if (!message) {
return callback(null, {
statusCode: 400,
body: JSON.stringify({ message: 'Message is required' }),
})
}
return Promise.all([
sendEmail({
to: 'Example <user#example.com>',
subject: 'New enquiry received!',
data:
`Name: ${name}\n` +
`Email: ${email}\n` +
`Budget: ${budget || 'n/a'}\n` +
`Attachment: ${attachment || 'n/a'}\n` +
`\n${message}`,
}),
sendEmail({
to: `${name} <${email}>`,
subject: 'Your message was delivered at ',
data:
'Thanks for reaching out!\n' +
'Somebody at our office will get back to you as soon as possible.\n' +
'\n' +
'While you wait, check out our Handbook (/) and get acquainted with how we do things around here.\n' +
'We have a lot of content there so feel free to explore as you please.\n' +
'\n' +
'Speak soon,\n' +
'\n',
}),
rp({
method: 'POST',
uri: `https://hooks.slack.com/services/${process.env.SLACK_PATH}`,
json: true,
body: {
text: `<!channel> New enquiry received`,
attachments: [
{
fallback: 'Information:',
pretext: 'Information:',
color: '#FF5050',
fields: [
{ title: 'Name', value: name, short: false },
{ title: 'Email', value: email, short: false },
{ title: 'Budget', value: budget || 'n/a', short: false },
{ title: 'Attachment', value: attachment || 'n/a', short: false },
{ title: 'Message', value: message || 'n/a', short: false },
],
},
],
},
}),
])
.then(() => {
return callback(null, {
statusCode: 200,
headers: {
'Access-Control-Allow-Origin': '*',
},
body: JSON.stringify({ message: 'Great success' }),
})
})
.catch(err => {
return callback(null, {
statusCode: 500,
body: JSON.stringify({
message: 'Oh no :( Message not delivered',
error: err
}),
})
})
}

Answer 1

No 'Access-Control-Allow-Origin' header is present on the requested resource.
This is saying that the resource you requested, your Lambda via API Gateway, is not returning an Access-Control-Allow-Origin header in its response; the browser is expecting the CORS headers in the response from the API (possibly because of an OPTIONS request), but the response doesn’t have them.
To solve your issue, add a Access-Control-Allow-Origin: * header to the response your Lambda returns. Using the first item you're returning:
if (!name) {
return callback(null, {
statusCode: 400,
headers: {
'Access-Control-Allow-Origin': '*',
// any other required headers
},
body: JSON.stringify({ message: 'Name is required' }),
})
}
Worth noting that you'll have to add those headers to every response.