尝试获取API密钥时出现401授权错误

Question

尝试从 Spoonaulous 获取 API 密钥时出现以下错误：代码：401 消息：“您未获得授权。请阅读 https://spoonaulous.com/food-api/docs#Authentication” 状态：“失败”

我尝试关闭浏览器并使用 npm start 重新启动它，但仍然收到错误。我还尝试了 Spoonaulous 的不同 API 密钥，但仍然遇到相同的错误。我也尝试过清除浏览器缓存，但仍然遇到相同的错误。

请建议我如何修复此错误。

我的代码：

import { useEffect } from 'react';

function Popular() {
  useEffect(() => {
    getPopular();
  }, []);

  const getPopular = async () => {
    const api = await fetch(
      'https://api.spoonacular.com/recipes/random?apiKey=${process.env.REACT_APP_API_KEY}&NUMBER=9'
    );
    const data = await api.json();                 
    console.log(data);
  };
  return <div>Popular</div>;
}

export default Popular;

提前致谢

Answer 1

您需要使用带有反引号`的模板文字。

错误：

const api = await fetch(
      'https://api.spoonacular.com/recipes/random?apiKey=${process.env.REACT_APP_API_KEY}&NUMBER=9'
    );

正确

const api = await fetch(
      `https://api.spoonacular.com/recipes/random?apiKey=${process.env.REACT_APP_API_KEY}&NUMBER=9`
    );

Answer 2

检查您的 env 文件是否位于根文件夹中而不是 src 文件夹中 在 env 文件中分配 API 密钥时，也不要给出任何空格 或 。

对我来说这是一个错误。

Answer 3

您应该始终调用

Try catch

中的API，以便您可以记录错误并检查是否有错误。 401 状态未经授权，您必须在 API“标头”中传递授权令牌。

const getPopular = async () => {
    const api = await fetch(
      `https://api.spoonacular.com/recipes/random?apiKey=${process.env.REACT_APP_API_KEY}&NUMBER=9`, {
  headers: {
    'Authorization': // pass your token here
    }
     }
    );
    try {
      const data = await api.json();                 
      console.log(data);
    } catch (error) {
       console.log(error.response) 
    }
  };

Answer 4

检查您的 env 文件是否位于根文件夹中。我删除了 .env 文件并再次创建它，它起作用了。

Answer 5

试试这个；它对我有用：

import { useEffect } from "react";

const Popular = () => {
  useEffect(() => {
    getpopular();
  }, []);

  const getpopular = async () => {
    const api = await fetch(
      `https://api.spoonacular.com/recipes/random?number=10&apiKey=YOUR API KEY`
    );
    const data = await api.json();
    console.log(data);
  };
  return <div>Popular</div>;
};

export default Popular;

Answer 6

请在 API 端点末尾添加“apiKey”参数。请务必在其前面加上“？”。