api和浏览器之间的二进制数据序列化/反序列化

如何解决api和浏览器之间的二进制数据序列化/反序列化

我试图同时使用https://cbor.io/和https://msgpack.org/将数据从服务器发送到React客户端，并且在使用它们中的任何一个时，chunk.js都会出现错误。使用msgpack的错误是

Unhandled Rejection (RangeError): Extra 74440 byte(s) found at buffer[1]

使用cbor的错误是

Unhandled Rejection (TypeError): Invalid non-string/buffer chunk

如果我使用服务器上运行的客户端请求相同的数据，则使用这两种格式的数据都可以正常工作。

在浏览器客户端和服务器之间进行通信时，我从未真正尝试过使用json或纯文本以外的其他数据格式，所以我想知道是否有我不知道需要做的事情工作吗？

我不确定问题是否出在服务器与客户端之间的数据损坏，是否需要在请求/响应中设置一些特殊的标头字段，是否需要使用压缩等。究竟是什么问题还是可能的问题，真让人迷失。

[编辑] 这是服务器代码的示例

import Koa,{Middleware} from 'koa'
import bodyParser from 'koa-bodyparser'
import Router from '@koa/router'
import * as fs from 'fs'
import * as util from 'util'
import cborParser from 'koa-cbor-bodyparser'
import koaQs from 'koa-qs'
import koaHelmet from 'koa-helmet'
import { encodeAsync} from 'cbor'
import cors from '@koa/cors'
const app = koaQs(new Koa())
const defaultMiddleware = [bodyParser(),cborParser(),koaHelmet(),cors()]
const useMiddleware = (middleware?: Middleware<Koa.ParameterizedContext>[]) => defaultMiddleware.forEach(mddlwr => app.use(mddlwr))

const rt = new Router()

const read = async (file: string) => {
    const readFile = util.promisify(fs.readFile)
    return readFile(file)
}

rt.get('/image',async ctx => {
    const data = await read('/home/beckspoppn/Dev/trykoa/image.jpg')
    const resp = {name: 'gary',data,age: 37}
    const body = await encodeAsync(resp)
    console.log(body)
    ctx.status = 200
    ctx.body = body
    ctx.response.type = 'application/cbor'
})

useMiddleware()
app.use(rt.routes())
app.listen(3000)

这是客户

import React from 'react'
import logo from './logo.svg'
import './App.css'
import axios from 'axios'
import {decodeAll} from 'cbor'

const getImage = async () => {
    //
    console.log('performing request')
    const response = await axios.get('http://localhost:3000/image',{responseType: 'arraybuffer'})
    console.log(response.data)

    const [data] = await decodeAll(response.data)
    console.log(data)
    return data
}

const onClick = async () => {
    await getImage()

  }
function App() {

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
          <button onClick={onClick}></button>
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
        </a>
      </header>
    </div>
  );
}

export default App;

使用msgpack的代码大致相同，只是更改了编码/解码以匹配该库。

感谢您的帮助。