转码Base64：跨越浏览器兼容性障碍

前端

2023-11-20 07:17:17

在线图片转base64遇到的问题及解决方案

在线图片转base64是将图片文件转换为base64编码格式的过程，这种编码格式使用64个字符来表示图片数据，便于在互联网上传输和存储。然而，在将在线图片转为base64的过程中，可能会遇到一些问题，特别是与浏览器的兼容性有关。

问题：浏览器兼容性差异

最近，我们在将在线图片转为base64时遇到了一个问题。在现代浏览器（如Chrome 90）中，该过程运行正常。然而，在较旧版本的浏览器（如Chrome 58）中，我们遇到了一个错误。

原因：CORS（跨源资源共享）限制

该错误是由浏览器施加的CORS限制引起的。CORS是一种安全机制，可防止跨域请求，即从一个域的网站向另一个域的服务器发送请求。在我们的情况下，在线图片转base64工具托管在一个不同的域上，这触发了Chrome 58的CORS限制。

解决方案：使用代理服务器

为了解决这个问题，我们使用了代理服务器。代理服务器充当中间人，将请求从客户端浏览器转发到图片托管服务器。代理服务器位于与图片托管服务器相同的域上，因此不会触发CORS限制。

可以使用各种免费和付费的代理服务器。我们使用了一个名为Cors-Anywhere的流行代理服务器，它提供了跨域请求的简单解决方案。

步骤：

在服务器端设置Cors-Anywhere代理。
在客户端代码中，将代理服务器的URL作为请求标头传递。

示例代码：

const proxyUrl = 'https://cors-anywhere.herokuapp.com/';
const imageUrl = 'https://example.com/image.png';

const requestOptions = {
  method: 'GET',
  headers: {
    'Proxy-Authorization': 'Bearer <API key>'
  }
};

fetch(proxyUrl + imageUrl, requestOptions)
  .then(response => response.blob())
  .then(blob => {
    // Convert the blob to base64
    const reader = new FileReader();
    reader.onloadend = () => {
      const base64data = reader.result;
      // Use the base64 data as needed
    };
    reader.readAsDataURL(blob);
  });