Невозможно получить данные в Netlify Dev Proxy (React)

Question

При развертывании приложения у меня возникла ошибка CORS, поэтому я решил попробовать Netlify Dev.

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

Пожалуйста, дайте мне знать, если вы заметите какую-либо очевидную ошибку с моей стороны.

Вот код выборки узла:

const fetch = require("node-fetch");
exports.handler = async function () {
  const headers = {
    "x-api-key": process.env.REACT_APP_MY_API_KEY,
    "content-type": "application/json",
  };
  try {
    const response = await fetch("https://api.crimeometer.com", { headers });
    if (!response.ok) {
      return { statusCode: response.status, body: response.statusText };
    }
    const data = await response.json();

    return {
      statusCode: 200,
      body: JSON.stringify(data),
    };
  } catch (err) {
    console.log(err);
    return {
      statusCode: 500,
      body: JSON.stringify({ msg: err.message }),
    };
  }
};

Вот внешний вид моего приложения (с соответствующим кодом):

  const initializeApp = useCallback(() => {

    async function fetchData() {
      try {
        let req = new Request(
          `./.netlify/functions/node-fetch?lat=${lat}&lon=${lon}&distance=10km&datetime_ini=${newdateyear}&datetime_end=${newdatenow}&page=1`);
        const res = await fetch(req);
        const info = await res.json();

        setCrimes(info.incidents);

      } catch (err) {
        console.log(err);
      }
    }

  }, [submit, lat, lon]);

  useEffect(() => {
    initializeApp();
  }, [initializeApp]);

Это ошибка в моей консоли:

Вот откуда я пытаюсь получить данные:

https://api.crimeometer.com/v1/incidents/raw-data?lat=${lat}&lon=${lon}&distance=10km&datetime_ini=${newdateyear}&datetime_end=${newdatenow}&page=1

It requires two headers to be set on frontend, which I have done in the netlify function

Answer 1

Ключ API в настоящее время добавляется на сторону React, где он устанавливает заголовок и выполняет вызов функции netlify. Но ключ API фактически требуется в функции netlify для запроса стороннего API.

Поэтому вам нужно переместить заголовок запроса из функции React в функцию Netlify, например:

const headers = {
  'x-api-key': API_KEY,
  'content-type': 'application/json',
}

const response = await fetch(
   "https://api.crimeometer.com/v1/incidents/raw-data",
   { headers }
);