使用JS fetch()发起GET请求时Basic认证报403错误，求排查方案

我希望在JavaScript的fetch()函数中通过Authorization的Basic认证方式提供凭据，具体该如何配置参数？

代码示例：

<script>
    
    fetch('http://localhost:8080/o/headless-delivery/v1.0/sites/20121/blog-postings/', {Authorization:"Basic "+btoa('test@corporation.com:test') })
    .then((Response) => console.log(Response))
</script>

加载HTML页面时控制台出现403错误，请问我的参数配置是否正确？可能的问题是什么？我期望得到JSON格式的响应。

1. 参数配置不正确 #

Basic认证的请求头必须放在headers对象内，而非直接作为fetch配置的顶层属性，这是请求未被正确认证的核心原因之一。

2. 修正后的代码示例 #

<script>
    fetch('http://localhost:8080/o/headless-delivery/v1.0/sites/20121/blog-postings/', {
        headers: {
            'Authorization': `Basic ${btoa('test@corporation.com:test')}`,
            'Accept': 'application/json' // 明确指定期望JSON响应
        }
    })
    .then(response => {
        // 先校验HTTP状态
        if (!response.ok) {
            throw new Error(`请求失败，状态码：${response.status}`);
        }
        return response.json(); // 解析JSON格式响应
    })
    .then(jsonData => console.log(jsonData))
    .catch(error => console.error('请求出错:', error));
</script>

3. 403错误的可能原因 #

• 凭据无效：检查test@corporation.com和对应的密码是否正确，以及该账号是否拥有访问目标接口的权限。
• CORS配置缺失：如果前端页面与后端接口不在同一域名/端口下，后端必须配置CORS允许携带Authorization头，否则浏览器会拦截跨域认证请求。
• 接口权限限制：后端接口可能限制了访问来源、HTTP方法，或者需要额外的权限标识（如角色、权限组），需核对接口的访问规则。
• 字符编码问题：btoa()仅支持ASCII字符，若账号/密码包含非ASCII字符（如中文），需先通过encodeURIComponent转码后再拼接编码，例如：

  const credentials = `${encodeURIComponent('用户名')}:${encodeURIComponent('密码')}`;
  const authHeader = `Basic ${btoa(unescape(encodeURIComponent(credentials)))}`;
  

4. 关键优化说明 #

• 添加Accept: application/json头，明确告知服务器返回JSON格式数据，避免返回其他格式内容导致解析失败。
• 不要直接打印Response对象，需通过response.json()解析后获取实际业务数据。
• 增加错误处理逻辑，捕获HTTP状态错误、网络异常等情况，便于排查问题。

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