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

问题描述

我一直在努力解决以下错误.我已经尝试了很多教程和stackoverflow答案，但是没有一种解决方案可以解决我的问题.

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.

在以下位置访问XMLHttpRequest " https://xxx " " http://localhost:3000 "已被CORS政策阻止:对 预检请求未通过访问控制检查:否 请求中存在"Access-Control-Allow-Origin"标头 资源.

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.

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

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

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

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

我的API使用amplify进入我的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-Header，Access-Control-Allow-Methods的每种组合.

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.

当我在API端点上的postman中调用选项时，这就是我的结果.因此，我确实获得了正确的标头，因此据我所知，我的API允许使用CORS.

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.

推荐答案

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

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

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

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

注意::您将收到错误消息所请求的资源上没有'xxx'标头."其中xxx是Access-Control-Allow-Methods，Access-Control-Allow-Origin和Access-Control-Allow-Headers，因此您需要将它们添加到AllowHeaders中.还要注意，您必须添加一个带有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.

然后，您对选项和get请求的响应应具有相同的标题:

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": "*"
}

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

当您省略邮递员中的x-api-key时，您的飞行前必须能够通过200 OK.

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

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