使用Fetch调用Geoapify API遇401未授权及响应undefined问题求助

核心问题分析 #

• 401 Unauthorized：主要原因是API密钥未正确传递，或Fetch配置引发权限校验问题
• 响应undefined：错误的跨域模式或错误处理方式导致无法读取响应内容

具体修复步骤 #

1. 确保API密钥正确传递 #

你当前用双引号包裹URL，JS模板字符串无法解析${MYKEY}变量，需改用反引号。如果是在CakePHP视图中，要确保密钥从PHP变量正确输出：

// 正确的模板字符串写法
let apiKey = "你的真实密钥"; // 或从CakePHP后端获取：<?= json_encode($apiKey) ?>
let apiUrl = `https://api.geoapify.com/v1/geocode/search?street=buenos aires&city=barcelona&country=españa&lang=es&limit=1&format=json&apiKey=${apiKey}`;

2. 修正Fetch配置 #

移除不必要的配置项，避免跨域和请求头冲突：

const requestOptions = {
  method: 'GET',
  headers: {
    'Accept': 'application/json' // 仅保留Accept头即可，GET请求无需Content-Type
  }
};

3. 正确的请求与错误处理 #

用try/catch配合await捕获所有错误场景，包括HTTP状态错误：

try {
  const response = await fetch(apiUrl, requestOptions);
  if (!response.ok) {
    // 读取API返回的错误详情，方便排查
    const errorDetail = await response.text();
    console.error('API返回错误:', errorDetail);
    throw new Error(`请求失败，状态码：${response.status}`);
  }
  const result = await response.json();
  console.log('请求成功:', result);
} catch (err) {
  console.error('请求出错:', err);
}

4. 禁用错误配置项 #

• 不要使用mode: 'no-cors'：该模式会让浏览器屏蔽所有响应内容，即使请求成功也无法读取数据，完全无法调试API返回的错误信息
• 移除credentials: "include"：Geoapify不需要你的站点Cookie，该配置会触发额外的跨域预检请求，反而可能引发权限校验问题

额外检查 #

• 直接在浏览器地址栏访问拼接好的完整API URL，确认能返回正常JSON，排除密钥和参数错误
• 确认CakePHP的CSRF中间件未拦截跨域请求，若有需要可针对Geoapify域名添加白名单

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