React fetch调用AWS Lambda DELETE接口报no-cors模式不支持错误如何解决

问题1：DELETE is unsupported in no-cors mode报错解决 #

• 浏览器no-cors模式仅支持GET、HEAD、POST三类简单请求，DELETE属于非简单请求，天然不支持该模式，必须删除fetch配置中的mode:'no-cors'字段。
• 前端请求头中不需要加Access-Control-Allow-Origin，这个是服务端返回的响应头，前端主动添加会被视为自定义请求头，触发额外的预检规则，反而导致跨域失败，直接删掉这个请求头配置。

问题2：删除no-cors后仍跨域的排查和解决 #

第一步：补全serverless.yaml的CORS配置 #

你当前的配置只声明了允许的源和请求头，缺少允许的方法配置，需要显式添加allowMethods字段，声明允许DELETE和OPTIONS预检请求：

cors:
  origin: '*' # <-- Specify allowed origin
  headers: # <-- Specify allowed headers
    - Content-Type
    - X-Amz-Date
    - Authorization
    - X-Api-Key
    - X-Amz-Security-Token
    - X-Amz-User-Agent
  allowMethods: # 新增允许的方法配置
    - OPTIONS
    - GET
    - POST
    - DELETE

配置更新后重新部署Serverless服务生效。

第二步：确保Lambda返回响应包含CORS头 #

如果你使用的是Lambda代理集成模式，API Gateway不会自动添加CORS响应头，需要你在Lambda函数的返回结果中手动添加：

// Lambda函数返回结构示例
exports.handler = async (event) => {
  // 你的业务逻辑
  return {
    statusCode: 200,
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "DELETE,OPTIONS,GET,POST",
      "Access-Control-Allow-Headers": "Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,X-Amz-User-Agent"
    },
    body: JSON.stringify({ status: "success" })
  };
};

修正后的前端请求代码 #

const deleteFoster = async (delid) =>  await fetch('URL' + delid, {
  method: "DELETE",
  cache: 'no-cache',
  credentials: 'same-origin',
  headers: {
    'Content-Type': 'application/json',
  },
})
.then(res => res.text())

故障排查技巧 #

如果配置后仍有跨域错误，打开浏览器控制台的网络面板，找到OPTIONS类型的预检请求，查看其返回的响应头和状态码：

• 如果OPTIONS请求返回4xx/5xx状态码，说明API Gateway没有正确处理预检请求，需要检查Serverless配置是否正确部署
• 如果OPTIONS请求返回200但响应头缺少对应的CORS字段，检查Lambda返回的响应头或者API Gateway的CORS配置是否生效

内容的提问来源于stack exchange，提问作者Thomas Z