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

Question

预检请求后出现此错误：

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.

我的目标是获取到 API 网关的 POST 请求。 我在网关控制台中的 OPTIONS 响应中添加了 Access-Control-Allow-Headers header，其值为“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 function （如果我在 API 网关中测试它就可以工作）：

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)
})}

我的整合响应

Answer 1

导航到您的Method Response post方法（不是options ）并检查您是否具有以下配置：

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

先试试不发送 email function, 只需callback(null, { response }); 在发送 email之前；

为什么？

发送 email可能会导致内部服务器错误（500） ，这意味着您必须将另一个HTTP 状态添加到您的POST 、 OPTIONS集成响应方法中。

希望有所帮助