使用带有分块传输编码的 XHR 的 HTTP POST

2023-05-14前端开发问题

本文介绍了使用带有分块传输编码的 XHR 的 HTTP POST的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！

问题描述

限时送ChatGPT账号..

我有一个 REST API，它通过 HTTP Post 接受音频文件.该 API 支持 Transfer-Encoding: 分块请求标头，以便文件可以在从客户端上运行的记录器创建时分段上传.这样，服务器可以在文件到达时开始处理文件以提高性能.例如:

<块引用>

HTTP 1.1 POST .../v1/processAudio

传输编码:分块

[Chunk 1 256 Bytes](服务器到达时开始处理)

[块 2 256 字节]

[块 3 256 字节]

...

音频文件通常很短，大小约为 10K 到 100K.我有 C# 和 Java 代码可以工作，所以我知道 API 可以工作.但是，我似乎无法使用 javascript 在浏览器中进行录制和上传.

这是我的测试代码，它使用传输编码对本地主机进行 POST:

<html><脚本类型="文本/javascript">函数流上传(){var blob = new Blob(['GmnQPBU+nyRGER4JPAW4DjDQC19D']);var xhr = new XMLHttpRequest();//在此处添加任何事件处理程序...xhr.open('POST', '/', true);xhr.setRequestHeader("传输编码", "chunked");xhr.send(blob);}</脚本><身体><div id='demo'>使用 XHR 测试分块上传</div><button onclick="streamUpload()">开始上传</button></身体></html>

问题是我在 Chrome 中收到以下错误

拒绝设置不安全的标头Transfer-Encoding"

streamUpload@uploadTest.html:14onclick@uploadTest.html:24

查看 XHR 文档后，我仍然感到困惑，因为它没有谈论不安全的请求标头.我想知道 XHR 是否可能不允许或实现 HTTP POST 的 Transfer-Encoding: chunked?

我查看了使用多个 XHR.send() 请求和 WebSockets 的变通方案，但两者都是不可取的，因为它需要对已经到位、简单、稳定和工作的服务器 API 进行重大更改.唯一的问题是我们似乎无法通过 Transfer-Encoding: chunked request header 从具有伪流的浏览器进行 POST.

任何想法或建议都会非常有帮助.

解决方案

正如评论中提到的，您不能设置该标头，因为它由用户代理控制.

有关完整的标头集，请参阅 4.6.2 setRequestHeader() 方法来自 W3C XMLHttpRequest Level 1 并注意 Transfer-Encoding 是由用户代理控制的标头之一，以使其控制传输的这些方面.

接受字符集
接受编码
访问控制请求标头
访问控制请求方法
连接
内容长度
Cookie
Cookie2
日期
DNT
期待
主持人
保持活跃
原产地
推荐人
TE
预告片
传输编码
升级
用户代理
通过

WhatWG Fetch API 生活标准中有一个类似的列表.https://fetch.spec.whatwg.org/#terminology-headersp>

I have a REST API that accepts an Audio file via an HTTP Post. The API has support for Transfer-Encoding: chunked request header so that the file can be uploaded in pieces as it is being created from a recorder running on the client. This way the server can start processing the file as it arrives for improved performance. For example:

HTTP 1.1 POST .../v1/processAudio

Transfer-Encoding: chunked

[Chunk 1 256 Bytes] (server starts processing when arrives)

[Chunk 2 256 Bytes]

[Chunk 3 256 Bytes]

...

The audio files are typically short and are around 10K to 100K in size. I have C# and Java code that is working so I know that API works. However, I cannot seem to get the recording and upload working in a browser using javascript.

Here is my Test Code that does a POST to localhost with Transfer-Encoding:

<html>
<script type="text/javascript">
  function streamUpload() {
    var blob = new Blob(['GmnQPBU+nyRGER4JPAW4DjDQC19D']);
    var xhr = new XMLHttpRequest();
    // Add any event handlers here...
    xhr.open('POST', '/', true);
    xhr.setRequestHeader("Transfer-Encoding", "chunked");
    xhr.send(blob);
  }
</script>

<body>
  <div id='demo'>Test Chunked Upload using XHR</div>
  <button onclick="streamUpload()">Start Upload</button>
</body>

</html>

The problem is that i'm receiving the following Error in Chrome

Refused to set unsafe header "Transfer-Encoding"

streamUpload @ uploadTest.html:14 onclick @ uploadTest.html:24

After looking at XHR documentation i'm still confused because it does not talk about unsafe request headers. I'm wondering if its possible that XHR does not allow or implement Transfer-Encoding: chunked for HTTP POST?

I've looked at work arounds using multiple XHR.send() requests and WebSockets but both are undesirable because it will require significant changes to the server APIs which are already in place, simple, stable and working. The only issue is that we cannot seem to POST from a browser with psedo-streaming via Transfer-Encoding: chunked request header.

Any thoughts or advice would be very helpful.

解决方案

As was mentioned in a comment, you're not allowed to set that header as it's controlled by the user agent.

For the full set of headers, see 4.6.2 The setRequestHeader() method from W3C XMLHttpRequest Level 1 and note that Transfer-Encoding is one of the headers that are controlled by the user agent to let it control those aspects of transport.

Accept-Charset
Accept-Encoding
Access-Control-Request-Headers
Access-Control-Request-Method
Connection
Content-Length
Cookie
Cookie2
Date
DNT
Expect
Host
Keep-Alive
Origin
Referer
TE
Trailer
Transfer-Encoding
Upgrade
User-Agent
Via

There is a similar list in the WhatWG Fetch API Living Standard. https://fetch.spec.whatwg.org/#terminology-headers

这篇关于使用带有分块传输编码的 XHR 的 HTTP POST的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！

The End

相关推荐

ajax请求获取json数据并处理的实例代码

js删除数组中指定元素的5种方法

JavaScript小数运算出现多位的解决办法

JavaScript(js)文件字符串中丢失＂\＂斜线的解决方法

layui中table列表增加属性 edit=＂date＂，不生效怎么办？

Rails/Javascript:如何将 rails 变量注入(非常)简单的 javascript

热门文章

热门精品源码

最新VIP资源