预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段内容类型

Question

我在预检请求后收到此错误：

CORS 策略已阻止从源“http://localhost:3000”获取“myInvokeUrl”的访问权限：预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段内容类型。 em>

我的目标是获取 API 网关的 POST 请求。我将 Access-Control-Allow-Headers 标头添加到网关控制台中的 OPTIONS 响应中，其值为“Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token” ，但实际响应中根本没有这个字段。

响应标头：

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

我的 Lambda 函数（如果我在 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: 'leosole@gmail.com',
    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);
    }
});};

请求：

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

Answer 1

导航到您的方法响应 发布方法（不是选项）并检查您是否有这些配置：

然后导航到您的集成响应发布方法（不是选项）并检查您是否有这些配置：

先试试不带发送邮件功能，在发送邮件之前callback(null, { response });；

为什么？

发送电子邮件可能会导致 内部服务器错误 (500)，这意味着您必须在两个 POST 中添加另一个 HTTP 状态 ,OPTIONS 集成响应方法。

希望有所帮助