JavaScript 中 fetch 怎么发送带有 Basic Auth 认证请求-js教程-PHP中文网

javascript中fetch发basic auth请求需将username:password用btoa() base64编码后拼接为"basic "+编码字符串作为authorization头；避免前端硬编码凭证，优先使用后端签发的token或服务端代理。

javascript 中 fetch 怎么发送带有 basic auth 认证请求

在 JavaScript 中使用 fetch 发送带 Basic Auth 的请求，核心是把用户名和密码拼成 username:password，再用 Base64 编码后放入 Authorization 请求头。

构造 Authorization 头的正确方式

Basic Auth 要求 Header 值格式为：Basic <base64-encoded-credentials></base64-encoded-credentials>。注意不是直接写明文，也不能漏掉 Basic （后面有个空格）。

浏览器原生支持 btoa() 进行 Base64 编码（仅限 ASCII 字符）。如果用户名或密码含中文或特殊符号，建议用 TextEncoder + btoa(String.fromCharCode(...)) 安全处理，但多数场景下 btoa 足够。

const credentials = btoa("user:pass123");
const authHeader = `Basic ${credentials}`;
把它作为 headers 的一部分传入 fetch

完整 fetch 请求示例

以下是一个标准的带 Basic Auth 的 GET 请求：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

fetch("https://api.example.com/data", {
  method: "GET",
  headers: {
    "Authorization": "Basic " + btoa("myuser:mypassword")
  }
})
.then(res => res.json())
.then(data => console.log(data));

如果是 POST 请求，记得加上 Content-Type 等必要头：

"Content-Type": "application/json"
Body 可以是 JSON.stringify({...})
Authorization 头写法不变

避免硬编码凭证的安全提醒

开发中别把账号密码直接写死在前端代码里——这等于公开暴露。实际项目应：

由后端提供短期有效的访问 Token，前端用 Token 替代 Basic Auth
敏感接口走服务端代理，由后端加 Auth 后转发
若必须前端发 Basic Auth（如对接内部测试 API），至少从环境变量或配置文件读取，并确保不提交到 Git

常见错误排查

遇到 401 错误时，优先检查：

是否漏了 Basic 前缀（注意空格）
用户名或密码是否有前后空格没 trim
是否用了 encodeURI 或 encodeURIComponent 替代 btoa（这两个不适用，会出错）
CORS 是否允许 Authorization 头（后端需设置 Access-Control-Allow-Headers: Authorization）

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南