Блог

Я построил API вход AWS API Gateway . Я также написал конечные точки для выполнения основных операций CRUD. Я звоню на эти конечные точки, используя axios мой React frontend . API, в свою очередь, вызывают AWS Lambda functions для взаимодействия DynamoDB .

Поскольку DynamoDB содержит конфиденциальные пользовательские данные, я хочу защитить их с помощью ключа API.

В соответствии с шагами, упомянутыми здесь и здесь.

Теперь для того, чтобы сделать вызов API, у меня был следующий код. Пожалуйста, обратите внимание, что я поменял реальные значения на фиктивные значения в целях объяснения.

src/config/api.js

 const customHeaders = {
  "X-Api-Key": "thisIsADummyStringForExplanation",
  "Content-Type": "application/json",
};

const axiosInstance = axios.create({
  baseURL: "https://this.is.a.dummy.base.url/v0",
  headers: customHeaders,
});

const Aws_Api_Gateway_GET = (uri) => {
  return axiosInstance({
    method: "get",
    url: `${uri}`,
    timeout: 2000,
  });
};

export { Aws_Api_Gateway_GET };

 

Ниже приведен код, который я написал для того, чтобы сделать GET запрос в конечной точке API

 Aws_Api_Gateway_GET("/my-resource")
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.error(err);
  });

 

ПРОБЛЕМА

Этот код выбрасывает CORS Error . Я могу заверить, что я включил CORS на шлюзе API, выбрав Enable CORS option для каждого ресурса.

Ниже приведена ошибка

 Access to XMLHttpRequest at 'https://this.is.a.dummy.base.url/v0/my-resource' from origin 'http://localhost:3000' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
 

Но когда я пытаюсь использовать то же Postman самое , это работает.

Может кто-нибудь, пожалуйста, помочь мне избавиться от ошибки CORS ?

Заранее спасибо.