API Gateway CORS: нет заголовка Access-Control-Allow-Origin

Хотя CORS был настроен через API Gateway и установлен Access-Control-Allow-Originзаголовок, я все равно получаю следующую ошибку при попытке вызвать API из AJAX в Chrome:

XMLHttpRequest не может загрузить http://XXXXX.execute-api.us-west-2.amazonaws.com/beta/YYYYY . На запрошенном ресурсе нет заголовка Access-Control-Allow-Origin. Следовательно, к источнику 'null' доступ не разрешен. Ответ имел код состояния HTTP 403.

Я попытался ПОЛУЧИТЬ URL-адрес через Postman, и он показывает, что указанный выше заголовок успешно передан:

И из ответа OPTIONS:

Как я могу вызвать свой API из браузера, не возвращаясь к JSON-P?

У меня такая же проблема. Я использовал 10 часов, чтобы узнать.

https://serverless.com/framework/docs/providers/aws/events/apigateway/

// handler.js

'use strict';

module.exports.hello = function(event, context, callback) {

const response = {
  statusCode: 200,
  headers: {
    "Access-Control-Allow-Origin" : "*", // Required for CORS support to work
    "Access-Control-Allow-Credentials" : true // Required for cookies, authorization headers with HTTPS 
  },
  body: JSON.stringify({ "message": "Hello World!" })
};

callback(null, response);
};

Если кто-то еще сталкивается с этим, я смог отследить основную причину в моем приложении.

Если вы используете API-Gateway с настраиваемыми авторизаторами, API-Gateway отправит 401 или 403 обратно, прежде чем он действительно попадет на ваш сервер. По умолчанию - API-шлюз НЕ настроен для CORS при возврате 4xx от настраиваемого авторизатора.

Также - если вы получаете код состояния 0или 1из запроса, проходящего через API Gateway, вероятно, это ваша проблема.

Чтобы исправить - в конфигурации шлюза API - перейдите в «Ответы шлюза», разверните «По умолчанию 4XX» и добавьте туда заголовок конфигурации CORS. т.е.

Access-Control-Allow-Origin: '*'

Не забудьте повторно развернуть свой шлюз - и вуаля!

1) Мне нужно было сделать то же самое, что и @riseres, и некоторые другие изменения. Это мои заголовки ответов:

headers: {
            'Access-Control-Allow-Origin' : '*',
            'Access-Control-Allow-Headers':'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token',
            'Access-Control-Allow-Credentials' : true,
            'Content-Type': 'application/json'
        }

2) И

Согласно этой документации:

http://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html

Когда вы используете прокси для лямбда-функций в конфигурации шлюза API, методы post или get не имеют добавленных заголовков, только параметры. Вы должны сделать это вручную в ответе (ответ сервера или лямбда-ответа).

3) И

Кроме того, мне нужно было отключить опцию «Требуется ключ API» в моем методе публикации шлюза API.

Если вы попробовали все, что касалось этой проблемы, безрезультатно, вы окажетесь там же, где и я. Оказывается, существующие в Amazon инструкции по настройке CORS работают нормально ... просто убедитесь, что вы не забыли выполнить повторное развертывание ! Мастер редактирования CORS, даже со всеми его красивыми маленькими зелеными галочками, не обновляет ваш API в реальном времени. Возможно, очевидно, но это озадачило меня на полдня.

Получил мой образец работы: я просто вставил 'Access-Control-Allow-Origin': '*' внутри заголовков: {} в сгенерированную функцию nodejs Lambda. Я не сделал ни одного изменения в лямбда-генерируемой API слоя.

Вот мой NodeJS:

'use strict';
const doc = require('dynamodb-doc');
const dynamo = new doc.DynamoDB();
exports.handler = ( event, context, callback ) => {
    const done = ( err, res ) => callback( null, {
        statusCode: err ? '400' : '200',
        body: err ? err.message : JSON.stringify(res),
        headers:{ 'Access-Control-Allow-Origin' : '*' },
    });
    switch( event.httpMethod ) {
        ...
    }
};

Вот мой вызов AJAX

$.ajax({
    url: 'https://x.execute-api.x-x-x.amazonaws.com/prod/fnXx?TableName=x',
    type: 'GET',
    beforeSend: function(){ $( '#loader' ).show();},
    success: function( res ) { alert( JSON.stringify(res) ); },
    error:function(e){ alert('Lambda returned error\n\n' + e.responseText); },
    complete:function(){ $('#loader').hide(); }
});

Для гуглеров:

Вот почему:

• Простой запрос или GET/ POSTбез файлов cookie не запускает предполетную проверку
• Когда вы настраиваете CORS для пути, API Gateway создает только OPTIONSметод для этого пути, а затем отправляет Allow-Originзаголовки, используя фиктивные ответы при вызове пользователя OPTIONS, но GET/ POSTне будет Allow-Originавтоматически
• Если вы попытаетесь отправить простые запросы с включенным режимом CORS, вы получите сообщение об ошибке, потому что этот ответ не имеет Allow-Originзаголовка.
• Вы можете придерживаться передовой практики, простые запросы не предназначены для отправки ответа пользователю, отправьте аутентификацию / файл cookie вместе с вашими запросами, чтобы сделать его «непростым», и предварительная проверка запустит
• Тем не менее, вам придется самостоятельно отправлять заголовки CORS для следующего запроса. OPTIONS

Подвести итог:

• Только безвредные OPTIONSбудут сгенерированы API Gateway автоматически
• OPTIONSиспользуются браузером только в качестве меры предосторожности для проверки возможности CORS на пути
• Если CORS будет принято в зависимости от фактического метода , например , GET/POST
• Вы должны вручную отправить соответствующие заголовки в свой ответ.

Я просто добавил заголовки в свой ответ лямбда-функции, и это сработало как шарм

exports.handler = async (event) => {
    const response = {
        statusCode: 200,
        body: JSON.stringify('Hey it works'),
        headers:{ 'Access-Control-Allow-Origin' : '*' }
    };
    return response;
};

Я нашел простое решение в

API Gateway> Выберите конечную точку API> Выберите метод (в моем случае это был POST)

Теперь есть выпадающий список ДЕЙСТВИЯ> Включить CORS .. выберите его.

Теперь снова выберите раскрывающийся список ДЕЙСТВИЯ> Развернуть API (повторно развернуть)

Это сработало !

Я получил свою работу после того, как понял, что авторизатор лямбда не работает и по какой-то неизвестной причине это переводится в ошибку CORS. Простое исправление для моего авторизатора (и некоторых тестов авторизатора, которые я должен был добавить в первую очередь), и это сработало. Для меня требовалось действие шлюза API «Включить CORS». Это добавило все заголовки и другие настройки, которые мне нужны в моем API.

Для меня ответ, который НАКОНЕЦ Сработал, был комментарием Джеймса Шапиро к ответу Alex R (второй по популярности). Я столкнулся с этой проблемой API-шлюза в первую очередь, пытаясь получить статическую веб-страницу, размещенную на S3, для использования лямбда-выражения для обработки страницы контактов и отправки электронного письма. Простая проверка [] Default 4XX исправила сообщение об ошибке.

После изменения функции или кода Выполните эти два шага.

Сначала включайте CORS, затем каждый раз развертывайте API .

Развертывание кода после включения CORS для обоих POSTи OPTIONSработал для меня.

Я работаю aws-serverless-express, и в моем случае нужно отредактировать simple-proxy-api.yaml.

До того, как CORS был настроен https://example.com, я просто заменил имя своего сайта и повторно развернул через npm run setup, и он обновил мой существующий лямбда / стек.

#...
/:
#...
method.response.header.Access-Control-Allow-Origin: "'https://example.com'"
#...
/{proxy+}:
method.response.header.Access-Control-Allow-Origin: "'https://example.com'"
#...

В моем случае, поскольку я использовал AWS_IAM в качестве метода авторизации для API Gateway, мне нужно было предоставить моей роли IAM разрешения для попадания в конечную точку.

Другой основной причиной этой проблемы может быть разница между HTTP / 1.1 и HTTP / 2.

Симптом: некоторые пользователи, но не все, сообщали об ошибке CORS при использовании нашего Программного обеспечения.

Проблема:Access-Control-Allow-Origin заголовок отсутствовал иногда .

Контекст: у нас есть лямбда-выражение, предназначенное для обработки OPTIONSзапросов и ответов с соответствующими заголовками CORS, например для Access-Control-Allow-Originсопоставления с белым списком Origin.

Решение . Кажется, что шлюз API преобразует все заголовки в нижний регистр для вызовов HTTP / 2, но сохраняет заглавные буквы для HTTP / 1.1. Это привело к event.headers.originсбою доступа к .

Убедитесь, что у вас тоже есть эта проблема:

Предполагая, что ваш API находится в https://api.example.com, а ваш интерфейс - в https://www.example.com. Используя CURL, сделайте запрос по HTTP / 2:

curl -v -X OPTIONS -H 'Origin: https://www.example.com' https://api.example.com

Выходные данные ответа должны включать заголовок:

< Access-Control-Allow-Origin: https://www.example.com

Повторите тот же шаг, используя HTTP / 1.1 (или с Originзаголовком в нижнем регистре ):

curl -v -X OPTIONS --http1.1 -H 'Origin: https://www.example.com' https://api.example.com

Если Access-Control-Allow-Originзаголовок отсутствует, вы можете проверить чувствительность к регистру при чтении Originзаголовка.

Помимо других комментариев, следует обратить внимание на статус, возвращаемый вашей базовой интеграцией, и если для этого статуса возвращается заголовок Access-Control-Allow-Origin.

Выполнение функции «Включить CORS» устанавливает только статус 200. Если у вас есть другие на конечной точке, например 4xx и 5xx, вам нужно добавить заголовок самостоятельно.

В моем случае я просто неправильно писал URL-адрес запроса на выборку. На serverless.yml, вы установите corsна true:

register-downloadable-client:
    handler: fetch-downloadable-client-data/register.register
    events:
      - http:
          path: register-downloadable-client
          method: post
          integration: lambda
          cors: true
          stage: ${self:custom.stage}

а затем в обработчике лямбда вы отправляете заголовки, но если вы сделаете запрос на выборку неправильно во внешнем интерфейсе, вы не получите этот заголовок в ответе, и вы получите эту ошибку. Итак, дважды проверьте URL-адрес вашего запроса на передней панели.

В Python вы можете сделать это, как показано в коде ниже:

{ "statusCode" : 200,
'headers': 
    {'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': "*"
     },
"body": json.dumps(
    {
    "temperature" : tempArray,
    "time": timeArray
    })
 }