401获取API密钥时授权错误

Question

当尝试从Spoonacular获取API密钥时，我得到以下错误:code: 401留言:"您未被授权。请阅读https://spoonacular.com/food-api/docs#Authentication"状态:"failure">

我已经尝试关闭浏览器并使用npm start重新启动它，但仍然得到错误。我也尝试过从Spoonacular不同的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;

Thanks in advance

Answer 1

你需要使用带有backsticks的模板文字。

错:

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 'Headers'中传递授权令牌。

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;