Исправить CORS-заголовок «Response to preflight ...», отсутствующий в AWS API-шлюзе, и усилить

Question

Я так долго боролся с ошибкой ниже. Я перепробовал так много уроков и ответов от stackoverflow, и ни одно из решений не решило мою проблему.

Доступ к XMLHttpRequest по адресу 'https://xxx' от источника 'http://localhost: 3000 ' заблокирован политикой CORS: Ответ на запрос предполетной проверки не проходит проверку контроля доступа: на запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin».

Я использую SAM server для создания моего 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: "'*'"

Моя лямбда-функция: И мой ответ 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'
   }
})

Я испробовал каждую комбинацию Access-Control-Allow-Headers, Access-Control-Allow-Methods в моем template.yaml, моей лямбда-функции и моем reactJs проекте.

Вот мой результат, когда я вызываю опции в postman на моей конечной точке API. Таким образом, я получаю верные заголовки, так что, насколько я понимаю, мой API разрешает CORS.

Answer 1

Так что после очень полезного обсуждения с @Jannes Botis я нашел решение.

В template.yaml я изменил свои значения на:

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

Примечание : Вы получите сообщение об ошибке «На запрошенном ресурсе отсутствует заголовок« xxx ».» где xxx - это либо Access-Control-Allow-Methods, Access-Control-Allow-Origin и Access-Control-Allow-Headers, поэтому вам необходимо добавить их в свои AllowHeaders.

Тогда ваш ответ из ваших опций и получить запрос должен иметь те же заголовки:

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 ok. ".

Ваш предполетный полет должен быть в состоянии передать 200 OK, когда вы опускаете ключ x-api в почтальоне.

В этот момент я я создаю метод OPTIONS в консоли AWS ApiGateway (https://enable-cors.org/server_awsapigateway.html), поскольку при развертывании с помощью SAM пропускается заголовок «X-Requested-With», который без получения «403 FORBIDDEN». Я опубликую полное решение, как только я это выясню.