修复 CORS“对预检的响应..."；AWS API 网关不存在标头并放大 [英] Fix CORS "Response to preflight..." header not present with AWS API gateway and amplify

问题描述

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

<块引用>

访问 XMLHttpRequest 在'

解决方案

因此，在与 @Jannes Botis 进行了非常有益的讨论后，我找到了解决方案.

在 template.yaml 中，我将值更改为:

全局变量:功能:超时:10接口:科尔斯:AllowMethods: "'DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT'"AllowHeaders: "'Content-Type,X-Amz-Date,X-Amz-Security-Token,Authorization,X-Api-Key,X-Requested-With,Accept,Access-Control-Allow-Methods,Access-Control-Allow-Origin,Access-Control-Allow-Headers"AllowOrigin: "'*'"我的API函数:类型:AWS::Serverless::Function特性:CodeUri: myendpoint/处理程序:app.lambdaHandler运行时:nodejs12.x事件:获取我的数据:类型:API特性:RestApiId: !Ref MyApi路径:/myendpoint方法:获取选项:类型:API特性:RestApiId: !Ref MyApi路径:/myendpoint方法:选项授权:ApiKeyRequired:false

注意:您将收到错误请求的资源上不存在‘xxx’标头."其中 xxx 是 Access-Control-Allow-Methods、Access-Control-Allow-Origin 和 Access-Control-Allow-Headers，因此您需要将它们添加到 AllowHeaders 中.另请注意，您必须使用 ApiKeyRequired: false 添加一个 Options 资源.

那么您的选项和获取请求的响应应该具有相同的标头:

标题:{Access-Control-Allow-Headers":Content-Type,X-Amz-Date,X-Amz-Security-Token,Authorization,X-Api-Key,X-Requested-With,Accept,Access-Control-Allow-Methods,Access-Control-Allow-Origin,Access-Control-Allow-Headers",访问控制允许来源":*"，访问控制允许方法":DELETE、GET、HEAD、OPTIONS、PATCH、POST、PUT"、X-Requested-With":*"}

注意:接受"必须存在，否则您将收到对预检请求的响应未通过访问控制检查:它没有 HTTP ok 状态.".

当您在 postman 中省略 x-api-key 时，您的预检必须能够通过 200 OK.

I've been struggling so long with the error below. I've tried so many tutorials and stackoverflow answers and none of the solutions fixes my problem.

Access to XMLHttpRequest at 'https://xxx' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I'm using SAM serverless to create my api.

template.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: "'*'"

My lambda function: Both my GET response and OPTIONS response has the following headers that is returned:

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'"
}

My API get in my ReactJs application using amplify:

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

I have tried every combination of Access-Control-Allow-Headers, Access-Control-Allow-Methods in my template.yaml, my lambda function and my reactJs project.

Here is what my result is when I call options in postman on my API endpoint. Thus I do get the correct headers back so per my understanding my API is allowing CORS.

解决方案

So after a very helpfull discussion with @Jannes Botis I found the solution.

In template.yaml I changed my values to:

Globals:
  Function:
    Timeout: 10
  Api:
    Cors:
      AllowMethods: "'DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT'"
      AllowHeaders: "'Content-Type,X-Amz-Date,X-Amz-Security-Token,Authorization,X-Api-Key,X-Requested-With,Accept,Access-Control-Allow-Methods,Access-Control-Allow-Origin,Access-Control-Allow-Headers'"
      AllowOrigin: "'*'"

  MyAPIFunction:
    Type: AWS::Serverless::Function
    Properties:
      CodeUri: myendpoint/
      Handler: app.lambdaHandler
      Runtime: nodejs12.x
      Events:
        GetMyData:
          Type: Api
          Properties:
            RestApiId: !Ref MyApi
            Path: /myendpoint
            Method: get
        Options:
          Type: Api
          Properties:
            RestApiId: !Ref MyApi
            Path: /myendpoint
            Method: options
            Auth:
              ApiKeyRequired: false

Note: You will get error "No 'xxx' header is present on the requested resource." where xxx is either Access-Control-Allow-Methods, Access-Control-Allow-Origin and Access-Control-Allow-Headers, thus you need to add them in your AllowHeaders. Also note that you have to add an Options resource with ApiKeyRequired: false.

Then your response from your options and get request should have the same headers:

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

Note: 'Accept' MUST BE PRESENT otherwise you will get "Response to preflight request doesn't pass access control check: It does not have HTTP ok status.".

Your preflight must be able to pass a 200 OK when you ommit the x-api-key in postman.

这篇关于修复 CORS“对预检的响应..."；AWS API 网关不存在标头并放大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！