Почему AWS Lambda, API Gateway возвращает ошибку CORS

Я знаю, что эта проблема была освещена во многих сообщениях по всему Интернету, и я думаю, что пробовал их все, но я все еще получаю ошибку 403 CORS в своем локальном приложении реагирования.

Вот частично заголовки из Dev Tools:

#GENERAL:
Request URL: https://<myGatewayApiUrl>.amazonaws.com/dev/api/byid/1/129
Request Method: OPTIONS
Status Code: 403

#RESPONSE HEADERS
access-control-allow-headers: Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token
access-control-allow-methods: GET,OPTIONS
access-control-allow-origin: *
content-length: 42
content-type: application/json

Я работал в шлюзе API, устанавливая Enable CORS, но я получаю сообщение об ошибке для одного метода получения Add Access-Control-Allow-Origin Integration Response Header Mapping to GET method -> invalid response status code specified - Но устанавливаются заголовки OPTIONS и заголовок GET Access-Control-Allow-Origin.

Я использую пакеты express и cors, вот фрагмент из моего файла API index.js:

const app = express();

app.use(cors());
app.options('*', cors());

Вот код запроса из приложения React:

export const getRecordById = async (userId, id, token) => {
  try {
    const response = await axios.get(
      process.env.REACT_APP_API_URL + `/byid/${userId}/${id}`,
      {
        headers: {
          Authorization: `Bearer ${token}`,
          'Content-Type': 'application/json',
        },
      }
    );
    return response.data;
  } catch (error) {
    console.info('ERROR', error);
    return error;
  }
};

Вот мой код ответа от Lambda API:

getById: asyncHandler(async (req, res, next) => {
    const { user, id } = req.params;
    const result = await recordsService.getRecordById(user, id);

    res.set({
      'content-type': 'application/json',
      'Access-Control-Allow-Origin': '*',
    });

    if (!result) {
      res.status(400).json({
        error: true,
        message: 'get record by ID action failed',
        data: {},
      });
    }
    res.status(200).json({
      error: false,
      message: 'successful record retrieval',
      data: {
        record: result,
      },
    });
  }),

Кроме того, у меня есть http-события файла serverless.yml, установленные как таковые: (насколько я понимаю, cors: true должен обрабатывать предварительные запросы)

- http:
    path: /api/records/byid/{user}/{id}
    method: GET
    cors: true

Я потратил слишком много времени, пытаясь понять это. Это должно быть что-то простое и глупое, правильно ли я использую res.set()? Все выглядит правильно, я знаю, что что-то упускаю. Спасибо

Ваш бессерверный шаблон определяет URL-адрес как /api/records/byid/{user}/{id}, но Axios, похоже, вызывает /dev/api/byid/1/129 без бита records.

hvaughan3 20.12.2020 21:42
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
2
1
899
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Шлюз API отклонит вызов с ошибкой CORS, если URL-адрес не найден по умолчанию.

Похоже, Axios не хватает бита /records в URL-адресе запроса.

Другие вопросы по теме