Question

我正在使用React（使用create-react-app）裁剪图像并进行编辑。完成后，我希望使用tinyPNG API进行压缩，这是一个很棒的工具，可以提供很好的png / jpg压缩。

目标：

在我的应用中，我有一张data:image/png;base64,iVBORw0KGgoA...图像。在tinyPNG API中，我看到了成功进行API调用的两个重要步骤：

Use HTTP Basic Authentication

所有请求都需要一个包含身份验证字符串api:YOUR_API_KEY的Base64摘要的Authorization标头，其中YOUR_API_KEY是可以在API帐户页面上找到的密钥。

Compress image making a POST request我的图片为[Binary]

POST /收缩HTTP / 1.1

主持人：api.tinify.com

授权：基本YXBpOmFiY2RlZmdoaWprbG1ub3BxcnN0dXZ3eHl6MDEyMzQ1

[二进制]

附带问题：我的data:image/png;base64,...字符串已经是“二进制”，还是必须将其转换为二进制？

如何使用我的图片data:image/png生成请求的Http POST请求？

我的方法：

为了让自己更轻松，我想使用Axios。我已将自己生成的API_KEY和data:image/png;base64,...生成为imageSource。比我尝试使用Axios创建我的API调用：

axios({
  method: 'post',
  url: 'https://api.tinify.com',
  withCredentials: true,
  auth: {
    username: api:MY_API_KEY',
  },
  data: {
    source: {
      url: imageSource, // data:image/png;base64,...
    },
  },
})
  .then(function(response) {
    console.log(response);
  })
  .catch(function(error) {
    console.error(error);
  });

总是给我一个错误：

无法加载https://api.tinify.com/：对预检请求的响应未通过访问控制检查：请求的资源上没有“Access-Control-Allow-Origin”标头。因此，不允许原点“http://localhost:3000”访问。响应的HTTP状态代码为404.

我想这意味着，我的HTTP基本身份验证不起作用？如果是这样，我做错了什么？令人困惑的是，tinyPNG不需要用户名和/或密码，而是api:MY_API_KEY。

虽然，我怎样才能发送data:image/png;base64？我可以使用来源（second example "Example upload from URL"）将其作为“网址”传递，还是必须将其作为二进制传递（first example "Example upload from file"？

感谢tinyPNG API成功响应的任何帮助。

最好的问候和感谢阅读我的问题。

如何使用HTTP Basic Auth进行POST http请求？

目标：

我的方法：

0 个答案: