尝试将 base64 图像绘制到画布时出现 HTTP 错误 431答案

【问题标题】：HTTP error 431 when trying to draw a base64 image to a canvas尝试将 base64 图像绘制到画布时出现 HTTP 错误 431
【发布时间】：2020-04-05 00:56:21
【问题描述】：

我尝试在客户端 JavaScript 中将图像（base64 格式）绘制到画布上。不幸的是，总是出现ERR_CONNECTION_RESET 431 (Request Header Fields Too Large) 错误。

我将 base64 图像作为对节点服务器的异步 POST 请求的响应。示例 base64 图像是：

'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAHgCA==='

但显然更长。 Chrome 开发者控制台显示如下：

GET http://localhost:3000/'data:image/png;base64,iVBORw0KGgoAA...
net::ERR_CONNECTION_RESET 431 (Request Header Fields Too Large)
Image (async)
(anonymous) @ client.js:59
async function (async)
(anonymous) @ client.js:51

我的代码是：

setInterval(async () => {

  const post_options = {
    method: 'POST',
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(request)
  }
  const response = await fetch('/api', post_options)
  const result = await response.json()
  const base64_response = "'" + result['image64'] + "'"

  const image = new Image()
  image.onload = () => {
    response_ctx.drawImage(image, 0, 0)
  }
  image.src = base64_response

}, 1000)

其中canvas_ctx 是画布的二维上下文，base64_response 是上述指定格式的图像。

我还应该提一下，我是 JavaScript 和 Web 开发的新手，因为我只是为我的一个项目做这件事。

【问题讨论】：

标签： javascript base64 client-side http-error

【解决方案1】：

image.src 接受一个包含 URL 的字符串。看起来您正在尝试使用包含数据 URL 的字符串，但是您在该字符串的内容中添加了引号，这使得它包含的 URL 无效。 431 错误是浏览器试图通过假设它是站点本地资源的名称然后从服务器请求它来理解现在损坏的 URL 的结果。

为了解决这个问题，

const base64_response = "'" + result['image64'] + "'"

应该是

const base64_response = result['image64']

【讨论】：

实际上我之前尝试过，但它会抛出错误：net::ERR_INVALID_URL。 URL 就是http://localhost:3000/data:image/png;base64,iVB... 那么你知道为什么无效吗？
好的，我发现了问题：我的后端服务器在 base64 字符串的末尾没有正确的= 填充。我只是用一个错误换另一个错误。