Javascript Api未获取reactJs

我正试着用钥匙取食物。在postman api中，它工作正常，但它是最重要的，没有响应。 后端代码

 app.get('/foods/:key', (req, res) => {
    foodsCollection.find({ key: req.params.key }).toArray((err, documents) => {
      res.send(documents[0])
    })
  })

前端代码

const { key } = useParams()
  const [foodById, setFoodById] = useState({})

  useEffect(() => {
    fetch(`http://localhost:5000/foods/${key}`)
      .then((res) => res.json())
      .then((data) => {
        setFoodById(data)
      })
  }, [key])

---

问题在于您没有在后端代码中设置响应的标题。并且您在后端和前端（5000和3000）使用不同的端口，因此同一来源策略不允许读取远程资源，这表明请求因违反CORS安全规则而被阻止

您必须设置CORS标题

您可以安装npm软件包并按照其说明解决以下问题：

var express = require('express')
var cors = require('cors')
var app = express()
 
app.use(cors())
.
.
.

我看到的另一个问题是，您已经将react路由器默认路由置于指定路径之前。因此，将

移动到

错误原因之后
在使用
JSON.stringify（）
方法将对象发送到客户端之前，需要stringify对象。当我们与web服务器交换数据时，数据必须是字符串

解决方案：
向客户机发送响应的正确方法是将整个API包装在一个
try catch
块中，并在每个响应中显式指定字符串以及字符串化数据

注意：虽然
500
状态代码用于错误处理，但您应该根据用例选择一个

app.get('/foods/:key', (req, res) => {
  try {
    /*
      rest of the code
    */

    foodsCollection.find({ key: req.params.key }).toArray((err, documents) => {
      if (err) {
        // 500 stands for internal server error
        return res.status(500).send(JSON.stringify('Here goes a meaningful error message!'));
      }

      // 200 stands for success
      res.status(200).send(JSON.stringify(documents[0]));
    });

    /*
      rest of the code
    */
  } catch (error) {
    // 500 stands for internal server error
    res.status(500).send(JSON.stringify('Here goes another meaningful error message!'));
  }
})

尽管您在上面添加了一些图像，但最重要的是缺少了一些图像，即浏览器的开发工具说明了问题所在。您应该在
控制台
选项卡以及该特定请求的
网络
选项卡中看到一些消息（如果确实发出了请求）。除非有人看到这一点，否则很难帮助解决您的问题

如果你还没有，我建议用（CRA）搭建任何react应用程序。这将为您提供一个可用的应用程序。如果使用CRA，您可以通过添加
“代理”来忽略开发中的CORS相关问题：http://localhost:5000“
，对于您的
包.json
文件，有关此方法的更多信息，请参阅，但请记住，这仅适用于本地开发。您也可以启动Chrome来忽略Web安全，方法是使用
--禁用Web安全
标志运行它，例如
Chrome--禁用Web安全
，但这并不是一个好主意，更像是一种快速确定您是否存在CORS问题的方法，因为Chrome掩盖了一些与CORS相关的问题，而事实上他们不是

我还建议将获取代码更改为使用
wait
，这样您就可以：

const response = await fetch(`http://localhost:5000/foods/${key}`);

if (!response.ok) {
  console.error(`Error message: ${response.statusText} ${response.status}`);
}

const result = response.json();
console.log(result);

这是没有必要的，但我总是发现它比
then/catch/finally
方法更容易阅读。
我认为您正面临CORS问题，看到了吗？我们需要更高的精度，什么不起作用？”res’有结果吗？您应该检查服务器是否在端口5000上运行，浏览器的“开发人员工具”的“网络”选项卡显示了什么？4XX错误。您可以通过
curl
发出请求吗？e、 g.
curlhttp://localhost:5000/foods/key
，将
键
替换为实际值显示发生的错误、开发人员工具中的原因。请为您的问题添加更多上下文，例如显示请求标题、响应状态等的“网络”选项卡的屏幕截图。如果API端点不公开，您可以隐藏它。API有CORS问题或者它的服务器到服务器API。它也不能处理这个问题。我认为问题出在后端，因为后端的console.log没有定义。你能给出一个解决方案吗？当然后端没有问题，因为你在使用邮递员发送请求时得到了响应。我说得对吗？你能在你的后端代码plz中控制台.log（req.params.key）吗？我正在得到我需要的值（req，params.key）。你使用的是'mongodb drive'还是'mongoose'？不工作兄弟。好的，我会进一步调查，你能检查我对你的问题的评论吗？是的，我正在编辑我的帖子并提供更多信息。请检查我的评论。你还没有附上网络截图。TabI已经整理好了。这是前线的一个国家问题。感谢你们在很短的时间内给出这样的回答。