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

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

0 голосов
/ 05 апреля 2020

У меня возникла ошибка 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]);

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

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

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

1 Ответ

0 голосов
/ 05 апреля 2020

Ключ 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 }
);
...