XMLHttpRequest接受chunked编码传输的HTTP Response时有问题

原创 于 2024-12-19 15:26:08 发布 · 471 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#XMLHttpRequest #流式 #chunked #angular #vue

实际中遇到的问题，虽然没有最终解决，但是浪费了好长事件，记录下来，避免再次踩坑。

现在前端框架发送Ajax请求时，大部分组件最终都是调用的XMLHttpRequest对象来发送和接受请求。

使用XMLHttpRequest接受流式chunked编码的数据时(Transfer-Encoding: chunked)，出现了如下问题：

响应的Content-Type谷歌浏览器火狐浏览器
未设置接收到1k左右的内容后才会触发

onprogress事件

接收到第一次内容后就触发onprogress事件
text/plain接收到1k左右的内容后才会触发

onprogress事件

接收到第一次内容后就触发onprogress事件
application/octet-stream接收到第一次内容后就触发onprogress事件接收到第一次内容后就触发onprogress事件
text/event-stream接收到第一次内容后就触发onprogress事件接收到第一次内容后就触发onprogress事件

HTTP中header的信息讲解以及设置
杨春建的博客
03-12 1万+
原文地址：http://blog.csdn.net/theowl/article/details/47251197HTTP消息中header头部信息的讲解本文导读：HTTP消息包括客户机向服务器的请求消息和服务器向客户机的响应消息。这两种类型的消息由一个起始行，一个或者多个头域，一个只是头域结束的空行和可选的消息体组成。HTTP的头域包括通用头，请求头，响应头和实体头四个部分。每个头域由一个域名，...
requests接收chunked编码问题
chenglanqi6606的博客
08-21 2247
我们都知道网页下载文件大多数是chunked编码，而requests库在解析chunked编码时就报错了： requests.exceptions.ChunkedEncodingError: ('Connection broken: IncompleteRead(4360 bytes rea...
xmlhttprequest获取Transfer-Encoding:chunked分时编码输出
a5213573的博客
06-01 499
问题： <?php $output = '第一部分<br>'; while( strlen($output) < 1024) { //chrome下小于1KB会缓存，无分时效果。 　　$output .= " "; } echo $output; ob_flush(); flush(); sleep(3); echo "第二部分";这段代码...
HttpWebRequest中的SendChunked
LL0115的博客
09-17 494
MSDN上说：WhenSendChunkedistrue, the request sends data to the Internet resource in segments.The Internet resource must support receiving chunked data. 传统的send request的方式是在request的header头添加Cont...
XMLHTTPRequest的属性和方法简介
鸟儿飞的专栏
07-26 1237
1、XMLHTTPRequest对象什么是？最通用的定义为：XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。（这个功能正是AJAX的一大特点之一：））来自MSDN的解释：XmlHttp提供客户端同http服务器通讯的协议。客户端
python requests接收chunked编码问题
热门推荐
金九 的技术博客
10-22 4万+
最近用python的requests写个爬虫下载
XMLHttpRequest Level 2 使用指南
11-24
7. **分块传输编码**：`chunked transfer encoding`支持，允许服务器逐步发送响应，提高网络效率。 8. **HTTP响应状态码**：`statusText`属性现在返回更详细的响应状态文本，而不仅仅是数字状态码。 通过这些增强...
大模型输出时选择流式传输，在前端怎么做到一个http请求连续接收多次回复的
07-17
在前端实现大模型流式传输的连续接收，核心是通过 **分块传输编码（Chunked Transfer Encoding）** 技术，结合现代浏览器的流式API处理。以下是具体实现方案： --- #### 1. **使用 Fetch API + ReadableStream** `...
请解决macOS系统下Chrome浏览器中"Failed to fetch"错误问题，具体场景和要求如下： 1. 问题背景: 当尝试使用fetch API发送POST请求，且请求体为92290个字符的JSON字符串(包含markdown格式内容)时，出现"Uncaught (in promise) TypeError: Failed to fetch"错误。网络状态显示为"待处理"(pending)，且请求未实际发送到后端。 2. 前置条件: - 已排除网络连接问题 - 已排除跨域(CORS)问题 - 请求体通过JSON.stringify(json)生成，包含markdown格式字符串 3. 分析与解决方案: 请从以下可能的技术方向提供详细排查步骤和解决方案： - 浏览器/服务器的请求大小限制(特别是Chrome对POST请求的默认限制) - JSON.stringify处理大型数据时的潜在问题 - fetch API的特殊配置需求(如headers设置、body格式) - 分块传输或数据压缩的实现方案 - 替代的HTTP客户端实现(如XMLHttpRequest对比fetch) - macOS系统或Chrome浏览器的特定配置调整 4. 输出要求: 提供可直接操作的解决步骤，包括必要的代码示例(如分块上传实现、请求头配置等)，并解释每个方案的原理及适用场景。
最新发布
10-05
// 关键：禁用Chunked编码 referrerPolicy: 'no-referrer-when-downgrade' }).catch(e => console.error('Fetch细节:', e)); ``` ##### 4. **分块传输实现方案** ```mermaid graph LR A[92,290字符数据] --> B...
http使用流式接收json时第一次只会传一个大括号 或者一个冒号 前端用js怎么解析出来
09-30
HTTP 使用流式传输 JSON 时，通常会分块发送数据，这被称为"分块编码"（Chunked Transfer Encoding），尤其是在服务器响应较大内容时。前端 JavaScript 解析这种类型的响应需要特别处理，因为数据不会像常规 JSON ...
ASP.net AJAX技术详解(3) 之 XMLHttpRequest对象
11-17 2156
 大家一起来学习AJAX，如果有什么问题，给我发Email：warensoft@foxmail.com 如果想了解更多关于DotNet方面的技术资料,文章以及视频，请到本团队的主页：www.warensoft.cn 通过上节的分析，我们知道Ajax 中向服务器提出请求以及截获响应的功能都是通过XMLHttpRequest对象实现的。在这一小节中，我们详细的讨论一下该对象的结构及使用。
XMLHttpRequest/fetch前端实现流式(stream)请求, 打印机效果
weixin_45184061的博客
06-04 1765
【代码】XMLHttpRequest/fetch前端实现流式(stream)请求, 打印机效果。
前端请求XMLHttpRequest详解
weixin_40348267的博客
06-17 1822
文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是 javascript 的部分，瑶琴会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。这篇文章瑶琴带大家学习浏览器中非常重要的一个api：XMLHttpRequest。XMLHttpRequest 是一个浏览器API，用于在客户端和服务器之间传输数据。它是AJAX（Asynchronous JavaScript and XML，异步JavaScript和XML）的基础，允许网页在不重新加载的情况下与服务
XMLHttpRequest的withCredentials属性
weixin_33825683的博客
03-09 8328
最近对接第三方网站出现一下错误:Access to XMLHttpRequest at 'https://third.site.com/request_url' from origin 'https://main.site.com' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' hea...
html5 xhr,Using xhr object for html5 chunked upload in a loop
weixin_39637049的博客
06-19 103
问题Experts, I am facing issues looping through the BLOB chunks I create for resumable chunked upload. The method I am following is as:I chunk the file to be uploaded using Blob.slice(), push all the ch...
前端流式输出3种实现
web18285482512的博客
12-11 2823
Fetch API：适合在HTTP响应中逐步获取和处理数据流。Server-Sent Events：用于从服务器推送实时事件，简单易用。WebSockets：提供双向通信，适合需要实时交互的应用。
XMLHttpRequest介绍
西凉的悲伤博客
09-18 3087
2.初始化 使用 open 方法进行一些初始化配置，method 和 URL 是必传的，其余的是可选的。参数说明：method —— HTTP 方法。通常是 “GET” 或 “POST”，小写也可。 URL —— 要请求的 URL，通常是一个字符串，也可以是 URL 对象。 async —— 是否同步。如果不传默认为true，如果显式地设置为 false，那么请求将会以同步的方式处理。 user，password —— HTTP 基本身份验证（如果需要的话）的登录名和密码。 使用 send 方法就会建立连
ajax核心技术 XMLHttpRequest 对象 性能安全 探讨和理解
木子聊前端
07-13 637
内容提要 XMLHttpRequest （XHR）对象是一个基于浏览器层面的API，可以通过JavaScript 实 现 数 据 传 输。 为后来的AJAX提供了革命性的技术支持； 主要 用于与服务器交互 XMLHttpRequest 文章中统一用简称（XHR）代替 主要讨论 XHR 怎么使用？ 通过js 怎么实现数据传输？ 既然是基于浏览器的API，浏览器为我们做了那些事情？ 传输过程的安全机制是怎么产生的？ 跨域（CORS）是怎么产生的？如何访问跨域？ XHR 用法 XHR 对象的使用和普通的对象一毛
fetch API
xin.wang的博客
12-17 866
多年来，XMLHttpRequest一直是web开发者的亲密助手。无论是直接的，还是间接的， 当我们谈及Ajax技术的时候，通常意思就是基于XMLHttpRequest的Ajax，它是一种能够有效改进页面通信的技术。 Ajax的兴起是由于Google的Gmail所带动的，随后被广泛的应用到众多的Web产品（应用）中，可以认为， 开发者已经默认将XMLHttpRequest作为了当前Web应
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值