React中发起带HTTP Basic Auth的POST请求及调用TinyPNG API压缩图片

嘿，我来帮你搞定这两个React相关的请求问题，一步步拆解给你看！

HTTP Basic Auth的核心逻辑是：把用户名和密码用冒号拼接，再做Base64编码，然后放到请求头的Authorization字段里，格式是Basic <编码后的字符串>。下面给你两种常用实现方式：

方式一：使用原生Fetch API #

// 假设你的认证信息和请求数据
const authUsername = "你的用户名";
const authPassword = "你的密码";
const postData = { key: "value" };

// 生成认证字符串
const authString = btoa(`${authUsername}:${authPassword}`);

// 发起POST请求
const sendPostRequest = async () => {
  try {
    const response = await fetch("你的请求URL", {
      method: "POST",
      headers: {
        "Authorization": `Basic ${authString}`,
        "Content-Type": "application/json" // 根据接口要求调整Content-Type
      },
      body: JSON.stringify(postData)
    });

    if (!response.ok) {
      throw new Error(`请求失败: ${response.status}`);
    }

    const result = await response.json();
    console.log("请求成功结果:", result);
  } catch (error) {
    console.error("请求出错:", error);
  }
};

// 调用函数
sendPostRequest();

方式二：使用Axios（更简洁） #

Axios自带了auth参数，不需要手动编码，直接传入用户名和密码即可：

import axios from "axios";

const sendPostRequestWithAxios = async () => {
  try {
    const response = await axios.post("你的请求URL", { key: "value" }, {
      auth: {
        username: "你的用户名",
        password: "你的密码"
      },
      headers: {
        "Content-Type": "application/json"
      }
    });

    console.log("请求成功结果:", response.data);
  } catch (error) {
    console.error("请求出错:", error);
  }
};

sendPostRequestWithAxios();

结合你的场景，需要先把Base64图片转成Blob（因为TinyPNG API接受二进制数据），再加上Basic Auth验证发起请求。具体步骤如下：

第一步：Base64转Blob工具函数 #

先写一个函数把data:image/png;base64,...格式的字符串转成Blob：

function base64ToBlob(base64Image) {
  // 去掉Base64前缀，只保留编码部分
  const base64Content = base64Image.split(",")[1];
  const byteCharacters = atob(base64Content);
  const byteArrays = [];

  // 分批处理字符，避免内存问题
  for (let offset = 0; offset < byteCharacters.length; offset += 512) {
    const slice = byteCharacters.slice(offset, offset + 512);
    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }

  // 根据图片实际类型调整MIME类型（比如JPG用image/jpeg）
  return new Blob(byteArrays, { type: "image/png" });
}

第二步：调用TinyPNG API发起压缩请求 #

const compressWithTinyPNG = async (base64Image) => {
  const TINYPNG_API_KEY = "你的TinyPNG API密钥";
  // TinyPNG的Basic Auth要求用户名是`api`，密码是你的API密钥
  const authString = btoa(`api:${TINYPNG_API_KEY}`);
  const imageBlob = base64ToBlob(base64Image);

  try {
    const response = await fetch("https://api.tinify.com/shrink", {
      method: "POST",
      headers: {
        "Authorization": `Basic ${authString}`
        // 不需要手动设置Content-Type，浏览器会自动根据Blob类型填充
      },
      body: imageBlob
    });

    if (!response.ok) {
      throw new Error(`压缩请求失败: ${response.statusText}`);
    }

    // 解析响应，TinyPNG会返回压缩后的图片URL和相关信息
    const compressResult = await response.json();
    console.log("压缩详情:", compressResult.output);
    
    // 可选：获取压缩后的图片并转成可使用的格式（比如Base64）
    const compressedImageResp = await fetch(compressResult.output.url);
    const compressedBlob = await compressedImageResp.blob();
    const compressedBase64 = URL.createObjectURL(compressedBlob);
    
    return compressedBase64; // 返回压缩后的图片地址，用于页面展示或上传
  } catch (error) {
    console.error("图片压缩出错:", error);
    throw error;
  }
};

// 调用示例：传入你的Base64图片字符串
// compressWithTinyPNG("data:image/png;base64,iVBORw0KGgoA...")
//   .then((compressedUrl) => { /* 处理压缩后的图片 */ })
//   .catch((err) => { /* 处理错误 */ });

注意事项 #

• 确保你的TinyPNG API密钥正确，并且没有超出调用次数限制（免费版每月500次）
• 如果是JPG图片，记得把base64ToBlob里的MIME类型改成image/jpeg
• 压缩后的图片URL是临时的，若需要长期保存，建议下载后上传到自己的存储服务

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