Http chunk介绍

本文详细阐述了HTTP1.1中响应传输的两种方式:Content-Length与Transfer-Encoding:chunked,解释了长连接如何提高性能,并讨论了在交互式应用中处理动态大小数据的挑战及解决方案,包括使用Chunked编码实现灵活的数据传输。
总结:
HTTP 1.1时,Response要嘛通过Content-Length来指定要传输的内容大小,要嘛通过Transfer-Encoding: chunked来传输动态大小的内容,此时要求Response传输的内容要符合chunk encoding的规定。
从抓包的角度来说,两个请求如果HTTP 参数(Head和Body)都相同的话,是等价的,不管请求是从浏览器还是Java代码发出来的。

CRLF -- Carriage-Return Line-Feed回车换行 回车(CR, ASCII 13, \r) 换行(LF, ASCII 10, \n)。
carriage ['kæridʒ] n. 运输;运费;四轮马车;举止;客车厢

HTTP1.1默认 支持长连接(持久连接),长连接避免为每个请求都创建各自的连接,而是多个请求使用一个已经建立好的连接。如果每个HTTP请求都进行set up和tear down,这对于性能损失是非常严重的。
在长连接中,每次传输的长度必须都被计算的非常精确。如果在http头中以Content-Length来标记请求request或者响应response的大小,客户端或者服务器就只会从流中读取 Content-Length指定大小的字节,然后表明本次传输结束。使得下一次客户端请求以及服务器端响应 继续使用这个相同的socket连接成为可能。

在交互式应用程序中有1个问题,就是它并不知道将要传输的数据有多大。
在HTTP1.0中,服务器就会省略response头中的Content-Length而持续写数据出去,当服务器挂了的话,它简单地断开连接。而经典的HTTP客户端会一直读数据直到碰到-1(传输结束的标识符)。
为了处理这个问题,HTTP1.1中增加了一个特殊的header: Transfer-Encoding:chunked,允许响应response被分块chunked。每次向连接写数据的时候会先计算大小,最后在response的尾部以一个0长度的chunk块标志着此次传输的结束。即HTTP1.1支持chunked编码,它允许HTTP消息被分成多块后再进行传输。 Chunking一般用在服务器响应response的时候,但是客户端也可以chunk大的请求request。 即Chunk编码允许服务器在发送完Header后,发送更多的Body内容。

Chunked编码使用若干个Chunk块串连而成, 每个Chunk块都以一个表明chunk快大小的16进制数字和一个额外的CRLF(回车换行)开始,后面跟着指定大小的内容。即每个Chunk块分为头部和正文两部分,头部内容指定下一段正文的字符总数(十六进制的数字)和数量单位(一般不写),正文部分就是指定长度的实际内容,两部分之间用回车换行(CRLF)隔开。 最后以一个长度为0的Chunk表明本次传输结束 。
1个典型的Chunk传输例子:
Html代码 复制代码  收藏代码
  1. C\r\n   
  2. Some data...   
  3. 11\r\n   
  4. Some more data...   
  5. 0\r\n  
C\r\n
Some data...
11\r\n
Some more data...
0\r\n

上述消息内容包含2个chunk块,第一个块是12字节长度(hex C),第二个块是17字节长度(hex 11)。

Java中减少Chunk数量的一种方法是不要适应flush(),只使用1个write()方法来输出所有内容。如果被输出的内容大小大于output的buffer大小,那么输出还是会被chunk,但是不使用flush()方法还是可以有效地减少不必要的chunking。

在有些情况下,有些客户端或者服务器只能处理老的HTTP1.0的行为。此时,应该使用 Connection: close的header来通知接收部分不要使用长连接。
Connection: keep-alive表明可以使用长连接。

参考: HTTP Chunking





相关解决的问题:
Axis2 RPC客户端默认根据Content-Length的大小来读取Response,而相应的Web Service使用chunked encoding的方式来传输,因此报错。通过设置参数来通知服务器不使用Chunk编码来解决。
Axis2 客户端调用时报【Transport error: 411 Error: Length Required】


CRLF、missing CR这2个错误都表明返回的Response内容不正确。
即返回的Response Header头中指定了Transfer-Encoding:chunked,但是传输的Response内容却不符合HTTP 1.1 RFC中对于chunked的规定。
因此在apache http client包通过以下2种不同的方法调用Request后,做解码操作时,在某个读取某个chunk时,读取根据CRLF标识符前面指定的字节数后,紧跟着应该是下一个Chunk,而读下一个Chunk时,发现CRLF前面的字符并不是16进制的数,即返回的Response不符合Chunking中对于分块的规定,所以报错。
Java代码 复制代码  收藏代码
  1. java.io.IOException: CRLF expected at end of chunk: 47/109  
  2.     at org.apache.commons.httpclient.ChunkedInputStream.readCRLF(ChunkedInputStream.java:207)   
  3.     at org.apache.commons.httpclient.ChunkedInputStream.nextChunk(ChunkedInputStream.java:219)   
  4.     at org.apache.commons.httpclient.ChunkedInputStream.read(ChunkedInputStream.java:176)   
  5.     at java.io.FilterInputStream.read(Unknown Source)   
  6.     at org.apache.commons.httpclient.AutoCloseInputStream.read(AutoCloseInputStream.java:108)   
  7.     at java.io.FilterInputStream.read(Unknown Source)   
  8.     at org.apache.commons.httpclient.AutoCloseInputStream.read(AutoCloseInputStream.java:127)   
  9.     at org.apache.jmeter.protocol.http.sampler.HTTPSampler2.sample(HTTPSampler2.java:853)   
  10.     at org.apache.jmeter.protocol.http.sampler.HTTPSamplerBase.sample(HTTPSamplerBase.java:1038)   
  11.     at org.apache.jmeter.protocol.http.sampler.HTTPSamplerBase.sample(HTTPSamplerBase.java:1022)   
  12.     at org.apache.jmeter.threads.JMeterThread.doNormalSample(JMeterThread.java:292)   
  13.     at org.apache.jmeter.threads.JMeterThread.run(JMeterThread.java:351)   
  14.     at java.lang.Thread.run(Unknown Source)   
  15.   
  16.   
  17. java.io.IOException: missing CR   
  18.     at sun.net.www.http.ChunkedInputStream.processRaw(Unknown Source)   
  19.     at sun.net.www.http.ChunkedInputStream.readAheadNonBlocking(Unknown Source)   
  20.     at sun.net.www.http.ChunkedInputStream.readAhead(Unknown Source)   
  21.     at sun.net.www.http.ChunkedInputStream.available(Unknown Source)   
  22.     at java.io.FilterInputStream.available(Unknown Source)   
  23.     at java.io.BufferedInputStream.read(Unknown Source)   
  24.     at java.io.FilterInputStream.read(Unknown Source)   
  25.     at org.apache.jmeter.protocol.http.sampler.HTTPSampler.readResponse(HTTPSampler.java:260)   
  26.     at org.apache.jmeter.protocol.http.sampler.HTTPSampler.sample(HTTPSampler.java:480)   
  27.     at org.apache.jmeter.protocol.http.sampler.HTTPSamplerBase.sample(HTTPSamplerBase.java:1038)   
  28.     at org.apache.jmeter.protocol.http.sampler.HTTPSamplerBase.sample(HTTPSamplerBase.java:1022)   
  29.     at org.apache.jmeter.threads.JMeterThread.doNormalSample(JMeterThread.java:292)   
  30.     at org.apache.jmeter.threads.JMeterThread.run(JMeterThread.java:351)   
  31.     at java.lang.Thread.run(Unknown Source)  
<think>首先,用户的问题是:“我想查找解决 'loading chunk 8058 failed' 问题的方案 请问解决 loading chunk 8058 failed 问题的方法”。所以,我需要提供针对这个特定错误的解决方案。 现在,回顾系统级指令: - 所有行内数学表达式必须使用$...$格式。 - 独立公式必须使用$$...$$格式并单独成段。 - LaTeX语法正确。 - 使用中文回答。 - 生成相关问题。 - 回答中引用的段落末尾自然地添加引用标识,例如:[^1] 用户提供了几个引用: - [1] 是关于Vue开发中解决Chunk Failed问题的完整攻略,涉及网络连接、浏览器缓存、webpack配置等。 - [2] 讨论了“Loading chunk {n} failed”的常见原因:网络问题、缓存问题、服务器问题、浏览器兼容性,并提供了解决方案。 - [3] 是针对Vue-router懒加载出错的解决方案,使用router.onError来处理错误。 - [4] 是另一个Vue项目案例,问题出在publicPath配置错误。 - [5] 是React项目中用ErrorBoundary和Suspense来处理错误。 用户的问题是特定的“loading chunk 8058 failed”,这看起来是JavaScript模块加载失败的错误,常见于Webpack构建的单页面应用(SPA),如Vue或React项目。 关键点: - 这个错误通常是由于异步加载的模块(chunk)加载失败引起的。 - 原因可能包括网络问题、缓存、服务器配置、构建配置错误等。 - 解决方案应从常见原因入手逐步排查。 我的回答结构应该清晰: 1. **介绍问题**:解释“Loading chunk 8058 failed”的含义。 2. **列出可能原因和解决方案**:基于引用和一般知识。 3. **具体步骤**:提供逐步的排查和解决方法。 4. **结尾**:自然地添加相关问题。 使用中文回答。 生成相关问题:在回答结束后生成相关问题。 引用标识:当引用特定内容时,在末尾添加[^n],根据提供的引用编号。 分析引用: - [1]:强调检查网络、清除缓存、检查webpack配置,特别是publicPath。 - [2]:列出网络、缓存、服务器、浏览器问题。 - [3]:针对Vue-router的错误处理代码。 - [4]:publicPath配置错误的例子。 - [5]:React中的ErrorBoundary方案。 综合这些,解决方案应包括: 1. **网络连接问题**:确保稳定网络,刷新页面。 2. **浏览器缓存问题**:清除缓存或使用Ctrl+F5强制刷新。 3. **构建配置问题**:检查webpack(或类似工具)的publicPath/output配置。 4. **文件服务器问题**:确保服务器正确托管所有文件。 5. **特定框架处理**:如Vue中使用router.onError,React中使用ErrorBoundary。 6. **依赖和版本问题**:重新安装依赖或升级Vue/React版本。 针对“8058”这个数字: - 这只是一个chunk ID,表示一个特定的模块。解决方案不特定于ID,而是通用方法。 步骤: 1. **初步排查**: - 刷新页面或重启浏览器。 - 检查网络。 - 清除浏览器缓存和Cookies。 2. **检查构建配置**: - 在Vue项目中,检查vue.config.js中的publicPath。 - 在React项目中,检查类似配置(如webpack.config.js)。 3. **框架特定方案**: - 对于Vue,参考[3]使用router.onError处理。 - 对于React,参考[5]使用ErrorBoundary。 4. **其他**: - 重新构建项目或重新安装依赖。 - 确保服务器路径正确。 在回答中引用时: - 例如,当提到publicPath时,引用[1]或[4]。 - 当提到错误处理时,引用[3]或[5]。 生成相关问题: - 基于主题,如: 1. 如何预防“Loading chunk failed”错误? 2. Vue项目中如何配置publicPath? 3. React中如何使用ErrorBoundary处理模块加载失败? 4. Webpack构建优化建议? 回答结构: - 引言:简要解释问题。 - 可能原因和解决方案:分点列出。 - 结论:总结建议。 - 相关问题:最后生成。 确保LaTeX:尽管这个问题不涉及数学表达式,但如果有任何地方需要,必须遵守格式。这里可能不需要。 最终回答大纲: 1. 开头:解释“Loading chunk 8058 failed”错误。 2. 常见原因: - 网络问题 - 缓存问题 - 构建配置问题(重点) - 服务器问题 - 浏览器兼容性 3. 解决方案: - 基本步骤:刷新、清除缓存 - 检查配置文件(如vue.config.js) - 框架特定处理(Vue/React) - 重新安装依赖 - 升级框架 4. 结尾建议。 5. 相关问题。 </think>### 解决 "Loading chunk 8058 failed" 错误的方案 "Loading chunk 8058 failed" 是 JavaScript 模块加载失败的常见错误,通常出现在基于 Webpack 构建的单页面应用(SPA)中(如 Vue 或 React 项目)。它表示应用程序在尝试异步加载模块(chunk ID 8058)时失败,可能由网络问题、缓存错误、配置不当或服务器路径错误引起。以下是系统化的排查和解决方法,基于常见原因逐步进行。 #### 1. **初步排查:基础修复** - **刷新页面与检查网络**: 确保网络连接稳定。如果是本地开发,检查服务器是否正常运行;如果是生产环境,确认用户端网络无问题。刷新页面(或强制刷新:Ctrl + F5)可能解决临时加载失败[^2]。 - **清除浏览器缓存**: 浏览器缓存可能导致旧版本资源被加载。清除缓存和 Cookies: - Chrome:设置 > 隐私和安全 > 清除浏览数据 - Firefox:选项 > 隐私与安全 > Cookies 和网站数据 > 清除数据 完成后重新加载页面[^1][^2]。 #### 2. **检查构建配置(常见根本原因)** - **publicPath 配置错误**: 这是最常见的根源。在 Webpack/Vue/React 项目中,`publicPath` 设置决定了资源文件的加载路径。如果值不正确(如根路径配置错误),会导致 chunk 文件加载失败。 - **Vue 项目**:检查 `vue.config.js` 文件: ```javascript module.exports = { publicPath: '/your-project-name/', // 确保路径匹配项目部署位置 }; ``` 错误的 `publicPath`(如 `./` 或 `/`)会使浏览器从错误 URL 加载文件(如 `http://localhost:8080/static/js/8058.js` 访问失败)。修正后重启开发服务器或重新构建[^1][^4]。 - **React 项目**:检查 `webpack.config.js` 或 Create React App 的 `package.json`,确保 `homepage` 字段正确: ```json "homepage": "/your-project-name/" ``` - **验证路径**:复制浏览器错误中的 chunk URL(如 `http://localhost:8080/static/js/8058.js`)到新标签页访问。如果 404 错误,表明路径配置问题[^4]。 - **output 配置问题**: 在 Webpack 配置中,确保 `output.filename` 和 `output.chunkFilename` 正确(例如 `output: { filename: '[name].bundle.js', chunkFilename: '[name].chunk.js' }`)。重新运行构建命令(如 `npm run build`)并部署[^1]。 #### 3. **框架特定处理方案** - **Vue 项目**: 使用 `vue-router` 的错误捕获机制,自动重试加载失败 chunk:[^3] ```javascript // 在 src/permission.js 或 router/index.js 中添加 router.onError((error) => { const jsPattern = /Loading chunk (\S)+ failed/g; const cssPattern = /Loading CSS chunk (\S)+ failed/g; const isChunkLoadFailed = error.message.match(jsPattern || cssPattern); if (isChunkLoadFailed) { window.location.reload(); // 强制刷新页面 } }); ``` 此方法在 chunk 加载失败时自动刷新页面,重新尝试下载资源。 - **React 项目**: 使用 `ErrorBoundary` 和 `Suspense` 捕获加载错误:[^5] ```jsx import { ErrorBoundary } from 'react-error-boundary'; import { Suspense } from 'react'; function FallbackComponent({ error }) { return <div>加载失败,请刷新页面: {error.message}</div>; } function App() { return ( <ErrorBoundary FallbackComponent={FallbackComponent}> <Suspense fallback={<div>Loading...</div>}> <YourComponent /> </Suspense> </ErrorBoundary> ); } ``` 这能在模块加载失败时显示友好错误,避免页面卡死。 #### 4. **深度修复:依赖与部署问题** - **重新安装依赖**: 删除 `node_modules` 和 `package-lock.json`,重新运行 `npm install` 或 `yarn install`。依赖损坏可能引起构建异常[^1]。 - **升级框架版本**: 如果是 Vue/React 版本兼容性问题,升级到最新稳定版: ```bash npm update vue@latest # Vue 项目 npm update react@latest # React 项目 ``` - **服务器配置检查**: 确保生产服务器(如 Nginx)正确托管静态文件。示例 Nginx 配置: ```nginx location / { try_files $uri $uri/ /index.html; # SPA 路由支持 } location /static/ { alias /path/to/your/static/files/; # 静态资源路径匹配 } ``` 验证文件是否存在(如通过 FTP 检查服务器上的 `8058.js` 文件)[^2][^4]。 - **浏览器兼容性**: 测试不同浏览器(Chrome、Firefox、Safari)。如果特定浏览器出错,尝试禁用插件或更新浏览器[^2]。 #### 总结建议 优先检查 `publicPath` 配置(>50% 的案例根源),其次是缓存清除和框架错误处理。如果本地开发正常但生产环境出错,重点排查部署路径和服务器设置。大多数问题通过修正配置或刷新即可解决[^1][^4]。若问题持续,提供错误日志或截图以便进一步诊断。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值