0

我在部署我的应用程序时遇到了 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
4

1 回答 1

0

API 密钥当前被添加到 React 端，它设置一个标头并调用 netlify 函数。但实际上在 netlify 函数中需要 API 密钥来请求第三方 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 }
);
于 2020-04-05T09:04:08.560 回答