Question

我正在向USDA数据库发出API请求，但是我无法通过React获得正确的信息。只是抛出了我无法解决的其他CORS错误。

我单独使用Javascript尝试了相同的API请求，并且效果很好，但是现在在React中我无法正确处理。

这是关于Javascript

const BASE_API = `https://api.nal.usda.gov/fdc/v1/search?api_key=api_key`;
async function getData(url) {
  const response = await fetch(url, {
      method: "POST",
      body: JSON.stringify({
          generalSearchInput: "Cheddar cheese"
      }),
      headers: {
          "Content-Type": "application/json"
      }
  });
  const data = await response.json();
  return data;
}

这是在React中

fetchFoodID = async () => {
    const response = await fetch("https://api.nal.usda.gov/fdc/v1/search?api_key=api_key",{
        method: "POST",
        body: JSON.stringify({
            generalSearchInput: "Cheddar"
        }),
        headers: {
            "Content-Type": "application/json"
        }
    });
    const data = await response.json();
    this.setState({
        data: data
    });
};

使用Javascript我可以获取带有搜索词的食物清单，但是在React中，它只会引发不同的问题。

Answer 1

解决这类CORS问题的最快方法是在将localhost映射到某个地址的主机文件中添加一个条目，然后从那里进行开发。显然，这是一个快速而肮脏的解决方案（因为它只能解决本地计算机上的问题），但是如果您要为自己的学习而开发一个小项目，那么这并不是一个坏方法。

127.0.0.1 your_custom_address

我确实运行了您的代码，并且运行正常。

如何通过React发出API请求？

1 个答案: