调用Spoonacular API时出现401授权错误如何排查修复

架构老林

2026-8-28

Spoonacular接口401未授权报错修复方案

核心错误原因

你当前遇到的401报错和缓存、API密钥本身有效性、浏览器状态无关，核心是代码语法错误导致API密钥没有被正确传入请求：
你在拼接请求地址时使用了普通单引号包裹URL，但同时用了模板字符串的${}语法插入环境变量，这种写法下${process.env.REACT_APP_API_KEY}会被当成普通字符串原样发送，接口收到的apiKey参数根本不是你配置的真实密钥，自然会返回未授权错误。
另外你代码里写的分页参数NUMBER=9是大写，Spoonacular接口识别的是小写参数number，就算授权通过也拿不到预期的9条返回结果。

修复步骤

把fetch里包裹请求URL的普通单引号，替换为反引号（键盘Tab键上方、与~同键的符号），让模板字符串插值语法正常生效
检查项目根目录的.env配置：确认REACT_APP_API_KEY=你的真实Spoonacular密钥的写法正确，密钥值不要额外包裹单引号、双引号
修改完.env文件后必须重新执行npm start重启开发服务，React脚手架只会在服务启动阶段读取环境变量，运行中修改不会生效

修正后可运行代码

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;