AWS API Gateway — CORS access-control-allow-origin — несколько записей

К сожалению, сегодня это невозможно. Спецификация CORS не допускает частичных подстановочных знаков, и в настоящее время шлюз API допускает только одно статическое значение для заголовка.

Вы можете перегрузить свой метод OPTIONS, чтобы динамически возвращать это значение на основе входящего заголовка хоста.

Это всегда раздражало CORS, если вы хотите включить несколько источников.

Обычный обходной путь в других системах (например, express/nginx и т. д.) заключается в следующем:

• проверить заголовок Origin, отправленный браузером
• проверьте его по белому списку источников
• если он совпадает, вернуть входящий Origin в качестве заголовка Access-Control-Allow-Origin, иначе вернуть заполнитель (источник по умолчанию)

Это невозможно при использовании автоматической поддержки CORS AWS-Gateway, поскольку используется фиктивная интеграция, однако это возможно, если вы напишете собственный код для обработки запроса OPTIONS.

Ниже приведен пример кода, написанного с интеграцией лямбда-прокси:

const allowedOrigins = [
    "http://example.com",
    "http://example.com:8080",
    "https://example.com",
    "https?://[a-z]*.?myapp.com",
    "http://localhost:[0-9]*"
];

exports.handler = (event, context) => {
    const origin = event.headers.Origin || event.headers.origin;
    var goodOrigin = false;

    if (origin) {
        allowedOrigins.forEach( allowedOrigin => {
            if (!goodOrigin && origin.match(allowedOrigin)) {
                goodOrigin = true;
            }
        });
    }

    context.succeed({
        headers: {
            "Access-Control-Allow-Headers": "Accept,Accept-Language,Content-Language,Content-Type,Authorization,x-correlation-id",
            "Access-Control-Expose-Headers": "x-my-header-out",
            "Access-Control-Allow-Methods": "DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT",
            "Access-Control-Allow-Origin": goodOrigin ? origin : allowedOrigins[0]
        },
        statusCode: 204
    });
};

Сохраните это как лямбда-функцию. Чтобы настроить это в API-Gateway, добавьте метод OPTIONS, а для Integration Request выберите Lambda Function с галочкой Use Lambda Proxy integration.

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

Почему бы не использовать шаблон сопоставления языка Velocity Template для проверки из списка разрешенных доменов и установки заголовка источника

$input.json("$")
#set($domains = ["https://www.example.com", "https://www.abcd.com"])
#set($origin = $input.params("origin"))
#if($domains.contains($origin))
#set($context.responseOverride.header.Access-Control-Allow-Origin="$origin")
#end

Я сделал что-то вроде этого:

const handler: APIGatewayProxyHandler = async (event) => {
  const origin = event?.headers?.Origin || event?.headers?.origin;
  const allowedOrigins = ['https://example.com'];
  const headers = {
    'Access-Control-Allow-Origin': allowedOrigins.includes(origin)
      ? origin
      : allowedOrigins[0],
  };

  return {
    headers,
    body: JSON.stringify({
      myResponse: 'data',
    }),
    statusCode: 200,
  };
};

Затем можно протестировать с помощью инструментов chrome dev, перейдя в свой клиентский домен и выполнив выборку в консоли:

fetch('https://exampleLambda.com/v1/example', { 
   method: 'get',
   mode: 'cors'
   headers: new Headers({
     'Authorization': 'Bearer 12345, 
   }), 
 })
 .then(result => result.json())
 .then(console.log)