小编Pou*_*dle的帖子

我一直在为下面的错误而苦苦挣扎。我已经尝试了很多教程和 stackoverflow 答案，但没有一个解决方案可以解决我的问题。

从源“ http://localhost:3000 ”访问 XMLHttpRequest at ' https://xxx '已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：否 'Access-Control-Allow-Origin ' 请求的资源上存在标头。

我正在使用 SAM 无服务器来创建我的 api。

模板.yaml：

Globals:
  Function:
    Timeout: 10
  Api:
    Cors:
      AllowMethods: "'DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT'"
      AllowHeaders: "'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'"
      AllowOrigin: "'*'"

我的 lambda 函数： 我的 GET 响应和 OPTIONS 响应都返回以下标头：

headers: {
  "Access-Control-Allow-Headers": "'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'",
  "Access-Control-Allow-Origin": "'*'",
  "Access-Control-Allow-Methods": "'DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT'"
}

我的 API 使用放大进入我的 ReactJs 应用程序：

API.get(apiName, path, {
   headers: {
      "Access-Control-Allow-Origin": "*",
      // "Access-Control-Allow-Headers": "Content-Type,X-Amz-Date,Authorization,X-Api-Key,x-requested-with",
      // "Access-Control-Allow-Methods": "OPTIONS,POST,GET,PUT,DELETE",
      // 'Content-Type': 'application/json'
   }
})

我已经在我的 template.yaml、我的 lambda 函数和我的 reactJs 项目中尝试了 Access-Control-Allow-Headers、Access-Control-Allow-Methods …