调用Google Books API返回空对象修改后出现403错误如何解决？

1. 初始空对象返回原因 #

你的URL拼接逻辑存在参数分隔符缺失问题：
你定义的API_KEY值开头为key=，和前面的查询参数q=subject:fiction拼接时没有加&分隔符，最终生成的请求URL为：
https://www.googleapis.com/books/v1/volumes?q=subject:fictionkey=<API-KEY>
服务器无法识别非法的fictionkey参数，也读取不到你携带的密钥参数，因此返回无效的空响应。

2. 403权限错误原因 #

这个错误不是密钥本身错误，是你在Google Cloud控制台创建API密钥时配置了应用限制导致的：
错误提示明确说明「来自Android客户端的请求被阻止」，说明你创建的API密钥设置了Android应用包名限制，但你是在浏览器端通过JS调用API，请求来源不符合你预设的限制规则，因此被Google接口拦截。

解决方案 #

• 先修正URL拼接逻辑，正确拼接参数：

// 密钥变量不要带key=前缀，仅存密钥值即可
const API_KEY = '<你的API密钥值>';
const BASE_URL = 'https://www.googleapis.com/books/v1/';
// 不同查询参数之间用&分隔
const API_URL = `${BASE_URL}volumes?q=subject:fiction&key=${API_KEY}`;

getBooks(API_URL);

async function getBooks(url){
  try {
    const res = await fetch(url);
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error('请求错误：', err);
  }
}

• 调整Google Cloud控制台的API密钥限制规则：
  • 进入Google Cloud控制台的「API和服务」-「凭据」页面，找到你创建的Books API密钥
  • 如果是纯前端Web应用调用，将应用限制改为「HTTP 引荐来源网址」，并添加你本地开发的域名（比如http://localhost:*/*）和线上域名
  • 确认「API限制」中已经勾选了Google Books API，未限制其他无关API
  • 保存配置后等待几分钟生效，再重新发起请求即可。
• 额外提示：如果是公开可访问的前端项目调用，建议增加后端服务代理API请求，避免API密钥直接暴露在前端代码中被滥用。

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