Включение CORS для доступа к AWS API Gateway? - PullRequest
Новая
       27

Включение CORS для доступа к AWS API Gateway?

0 голосов
/ 24 октября 2019

Я пытаюсь получить доступ к шлюзу API AWS с помощью jQuery, например: 

$.ajax({
    method: 'GET',
    url: _config.api.invokeUrl + '/mymodel/' + id + '/attr',
    headers: {
        Authorization: authToken
    },
    data: {},
    contentType: 'application/json',
    success: function(result){
        console.log('success:'+result);
    },
    error: function ajaxError(jqXHR, textStatus, errorThrown) {
        console.error('Error: ', textStatus, ', Details: ', errorThrown);
        console.error('Response: ', jqXHR.responseText);
    }
});

Однако jQuery / браузер сообщает об ошибке CORS: 

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://sd98fsf98.execute-api.us-east-1.amazonaws.com/test/mymodel/123/attr. (Reason: CORS request did not succeed).

Я могуисправить это, разместив мой код от sd98fsf98.execute-api.us-east-1.amazonaws.com. Я не могу найти никакой опции в настройках API шлюза, чтобы отключить эту проверку. Как обойти ограничение CORS?

Ответы [ 2 ]

1 голос
/ 24 октября 2019

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

В консоли API Gateway: Действия -> Включить Cors [Выбрать '*' для всех] -> Развернуть API CORS

После развертывания API запросы сначала получают заголовки из метода параметров, а затем перенаправляются в метод GET и завершаются успешно.

DEPLOY

Дополнительную информацию о включении CORS можно найти в AWS DOCS: https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html

Надеюсь, это поможет!

0 голосов
/ 25 октября 2019

В дополнение к ответу Ashwani Jha и комментарию peeebeee см. Эту статью: https://enable -cors.org / server_awsapigateway.html

В Amazon API Gateway добавлена ​​поддержка включения CORSчерез простую кнопку в консоли API Gateway. К сожалению, эта кнопка имеет частичное поведение, таким образом корректно устанавливая CORS только для ответа 200 (а не других кодов состояния HTTP) и игнорируя поддержку заголовков JQuery. Лучшее решение, рассмотренное до сих пор, - это избегать использования кнопки CORS и устанавливать конфигурации вручную. Это может быть достигнуто за несколько шагов:

  1. Вход в консоль API Gateway
  2. Создайте все ресурсы REST, которые должны быть представлены их методами, перед настройкой CORS (если новыйресурсы / методы создаются после включения CORS, эти шаги необходимо повторить)
  3. Выберите ресурс
  4. Добавьте метод OPTIONS, выберите тип интеграции "mock"
  5. Для каждого методаресурса
  6. Перейти к методу ответа
  7. Добавить все поддерживаемые методы ответа (например, 200, 500 и т. д.)

  8. Для каждого кода ответаустановите заголовки ответа в

    • X-Requested-With
    • Access-Control-Allow-Headers
    • Access-Control-Allow-Origin
    • Access-Control-Allow-Methods

  9. Перейдите в Integration Response, выберите один из созданных кодов ответа, затем сопоставления заголовков

  10. Вставьте значения по умолчаниюдля примера заголовков:
    • X-Requested-With: '*'
    • Access-Control-Allow-Headers: 'Content-Type, X-Amz-Date, Authorization, X-Api-Key, x-Request-with'
    • Access-Control-Allow-Origin: '*'
    • Access-Control-Allow-Methods: 'POST, GET, OPTIONS'

Эта операция должна повторяться для каждого метода, включая только что созданныйОПЦИИ

Развертывание API на этапе Проверьте с помощью http://client.cors -api.appspot.com / client , что запросы CORS были успешно включены
...