React中Axios请求JSONBin带Headers时返回404错误

我用JSONBin模拟用户列表JSON数据，请求公开Bin时代码运行正常，但给Axios添加请求头后就收到404请求错误。

我的代码： #

useEffect(() => {
    axios.get(`${baseURL}/63be860ddfc...[bin-ID etc]/latest`, {
      headers: {
        "X-Master-Key": "<MASTER-KEY-HERE>",
        "X-Access-Key": "<ACCESS-KEY-HERE>"
      }
    })
    .then((res) => {
      setUsers(res.data.record);
      console.log('theRes:', res)
    })
    .catch(error => {
      console.log('theError:', error);
      setError(error);
    })
  }, []);

控制台错误信息： #

AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
code: "ERR_BAD_REQUEST"
config: 
adapter:(2) ['xhr', 'http']
data: undefined
env: {FormData: ƒ, Blob: ƒ}
headers: 
AxiosHeaders Accept: "application/json, text/plain, */*"
Content-Type: null
X-Access-Key:"<THE-ACCESS-KEY-...>"
X-Master-Key:"<THE-MASTER-KEY-...>"
Symbol(Symbol.toStringTag): (...)
[[Prototype]]: Object
maxBodyLength: -1
maxContentLength: -1
method:"get"
timeout: 0
transformRequest: [ƒ]
transformResponse: [ƒ]

我参考过JSONBin的官方文档，但可能遗漏了某些配置。

解决建议： #

• 核对URL完整性
  确认baseURL是https://api.jsonbin.io/v3（必须包含v3版本路径），Bin ID要替换成完整的实际ID，不要保留示例中的省略号。

• 避免请求头混用
  不要同时传递X-Master-Key和X-Access-Key：主密钥拥有最高权限，单独使用即可；如果用访问密钥，要确保该密钥已被授权访问目标Bin。

• 检查Bin状态与权限
  确认目标Bin未被删除，若为私有Bin，需确保使用的密钥具备读取权限；若之前是公开Bin改为私有，要同步更新密钥权限配置。

• 简化请求头写法
  尝试单独定义请求头对象，避免格式异常：

  const requestHeaders = {
    'X-Master-Key': '<你的主密钥>'
  };
  axios.get(`${baseURL}/完整BinID/latest`, { headers: requestHeaders })
  

• 用工具验证API可用性
  用curl或Postman直接测试接口，排除代码问题：

  curl -H "X-Master-Key: <你的主密钥>" https://api.jsonbin.io/v3/完整BinID/latest
  

  如果工具请求也返回404，说明问题出在密钥或Bin本身，而非代码逻辑。

内容的提问来源于stack exchange，提问作者Rolanda