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

Posted 2023-02-27

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

【英文标题】：Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response

【发布时间】：2020-02-24 04:22:51

【问题描述】：

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

CORS 策略已阻止从源“http://localhost:3000”获取“myInvokeUrl”的访问权限：。 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: '[e-mail]',
    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

【问题讨论】：

您在 AWS 上的 CORS 配置 (docs.aws.amazon.com/en_pv/apigateway/latest/developerguide/…) 是什么样的？

我不确定那是什么。是集成响应吗？ i.stack.imgur.com/xibIO.png

【参考方案1】：

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

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

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

为什么？

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

希望有所帮助

【讨论】：

我的 POST 方法有这些配置。我尝试不使用 sendMail 功能，但它仍然给我同样的错误。

启用 CORS 后是否重新部署了 api？

我做到了。我会尝试使用 axios 看看问题是否仍然存在。