Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response

Question

I'm getting this error after the preflight request:

Access to fetch at 'myInvokeUrl' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

My goal is to fetch a POST request to API Gateway. I added the Access-Control-Allow-Headers header to my OPTIONS response in the Gateway console with a value of 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token', but the actual response doesn't have this field at all.

Response Headers:

access-control-allow-methods: POST,OPTIONS
access-control-allow-origin: *
content-length: 36
content-type: application/json
date: Mon, 28 Oct 2019 21:13:22 GMT
status: 200

My Lambda function (it's working if I test it in API Gateway):

module.exports.sendM = function (event, context, callback) {
console.log(event);
var body =`<p>Olá, ${event.name}!</p><p>Esse é o resumo do seu pedido: </p>`;

let minion1 = event.minion;
let minion2 = event.minion2;
let minion3 = event.minion3;

if (event.minion1){
    body += `<p> Au Naturel: ${event.minion1}</p>`;
}
 if (event.minion2){
    body += `<p> Phil: ${event.minion2}</p>`;
}
 if (event.minion3){
    body += `<p> Bored Silly Kevin: ${event.minion3}</p>`;
}
body += `<p> Enviar para ${event.address}</p>`;

var mailOptions = {
    from: '[email protected]',
    subject: 'Pedido minionshop',
    html: body,
    to: `${event.mail}`
    // bcc: Any BCC address you want here in an array,
};


// create Nodemailer SES transporter
var transporter = nodemailer.createTransport({
    SES: ses
});
const response = {
    statusCode: 200,
    headers: {
      "Access-Control-Allow-Origin": "*", // Required for CORS support to work
      "Access-Control-Allow-Credentials": true, // Required for cookies, authorization headers with HTTPS
      "Access-Control-Allow-Headers": "Origin,Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token",
      "Access-Control-Allow-Methods": "POST, OPTIONS"
    },
    body: JSON.stringify(event)
};
// send email
console.log(event.mail);
transporter.sendMail(mailOptions, function (err, info) {
    if (err) {
        console.log("Error sending email");
        callback(err);
    } else {
        console.log("Email sent successfully");
        callback(null, response);
    }
});};

The request:

handleSubmit = event => {
event.preventDefault();
console.log('trying to fetch')
fetch('myInvokeUrl', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
    // 'Access-Control-Allow-Origin': '*'
  },
  body: JSON.stringify({
    name: this.state.name,
    mail: this.state.mail,
    address: this.state.address,
    minion1: this.state.minion1,
    minion2: this.state.minion2,
    minion3: this.state.minion3
  })
})
.then(function(response) {
return response.json()
}).then(function(json) {
  console.log('parsed json', json)
}).catch(function(ex) {
  console.log('parsing failed', ex)
})}

My integration response

how does your CORS configuration(docs.aws.amazon.com/en_pv/apigateway/latest/developerguide/…) at AWS look like? — skyboyer
I'm not sure what is that. Is it the integration response? i.stack.imgur.com/xibIO.png — leosole

Assael Azran Assael Azran · Accepted Answer · 2019-10-29T09:11:37

Navigate to your Method Response post method (not options) and check if you have these configurations:

Then navigate to your Integration Response post method (not options) and check if you have these configurations:

Try it first without the send email function, just callback(null, { response }); before send email;

Why?

send email could cause Internal server error (500) meaning you will have to add another HTTP Status to your both POST,OPTIONS Integration Response methods.

Hope that help

Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response

1 Answers