使用Ajax调用带Basic Auth的安全API无法显示图片

看起来你已经尝试用XHR请求带Basic Auth的图片，但遇到了加载显示的问题——核心原因是你当前的代码只打印了响应文本，并没有把二进制的图片数据转换成页面能识别的格式；而且直接给img标签用原URL的话，浏览器会发起不带认证头的请求，自然会被服务器拒绝。

我给你两个可行的解决方案，都是通过请求获取图片二进制数据，再转换成可渲染的URL：

方案一：修改XHR代码，处理Blob类型响应 #

首先在页面里准备好img元素，然后用XHR请求图片并设置响应类型为blob，最后转换成Object URL赋值给img的src：

<head>
  <script>
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "https://myurl.com", true);
    xhr.withCredentials = true;
    // 设置Basic Auth头，注意生产环境别硬编码账号密码！
    xhr.setRequestHeader("Authorization", 'Basic ' + btoa('test:test123'));
    // 关键：告诉XHR我们要接收二进制的Blob数据
    xhr.responseType = 'blob';

    xhr.onload = function () {
      if (xhr.status === 200) {
        // 将Blob转换成浏览器能识别的临时URL
        const imageUrl = URL.createObjectURL(xhr.response);
        // 把URL赋值给页面上的img元素
        document.getElementById('image').src = imageUrl;
        
        // 可选：页面卸载时释放临时URL资源，避免内存泄漏
        window.addEventListener('unload', () => URL.revokeObjectURL(imageUrl));
      } else {
        console.error(`图片请求失败，状态码：${xhr.status}`);
      }
    };

    xhr.onerror = () => console.error('请求过程中发生网络错误');
    xhr.send();
  </script>
</head>
<body>
  <img id="image" style="width: 430px;" alt="需要认证的图片">
</body>

方案二：使用更简洁的Fetch API #

Fetch是现代浏览器推荐的异步请求方式，代码更清爽：

<head>
  <script>
    fetch("https://myurl.com", {
      method: 'GET',
      credentials: 'include',
      headers: {
        'Authorization': 'Basic ' + btoa('test:test123')
      }
    })
    .then(response => {
      if (!response.ok) throw new Error(`请求失败，状态码：${response.status}`);
      return response.blob();
    })
    .then(blob => {
      const imageUrl = URL.createObjectURL(blob);
      document.getElementById('image').src = imageUrl;
    })
    .catch(error => console.error('加载图片出错：', error));
  </script>
</head>
<body>
  <img id="image" style="width: 430px;" alt="需要认证的图片">
</body>

额外注意事项 #

• 跨域问题：如果你的页面和图片服务器域名不同，必须确保服务器配置了正确的CORS响应头，比如Access-Control-Allow-Origin（指定你的页面域名）、Access-Control-Allow-Credentials: true，否则请求会被浏览器拦截。
• 安全警告：绝对不要在前端代码里硬编码用户名和密码！这会直接暴露敏感信息，生产环境应该通过后端代理请求，或者使用更安全的认证方式（比如Token）。
• 特殊字符处理：如果用户名/密码包含非ASCII字符，btoa会报错，需要先转成UTF-8再编码：btoa(unescape(encodeURIComponent('your-username:your-password')))

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