diff --git a/CHANGELOG.md b/CHANGELOG.md index 3658040d..0827a74a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ English | [简体中文](./CHANGELOG_CN.md) ## 3.14.4-rc (2022-03-??) - `Fix(Network)` Fix CPU high load bug when response is a large string. (issue #515) +- `Fix(Network)` Fix missing Request Headers issue in XHR. (issue #522) ## 3.14.3 (2022-03-28) diff --git a/CHANGELOG_CN.md b/CHANGELOG_CN.md index ce677637..ca9c4039 100644 --- a/CHANGELOG_CN.md +++ b/CHANGELOG_CN.md @@ -3,6 +3,7 @@ ## 3.14.4-rc (2022-03-??) - `Fix(Network)` 修复回包超大时导致的卡死问题。 (issue #515) +- `Fix(Network)` 修复 XHR 中缺失显示 Request Headers 的问题。 (issue #522) ## 3.14.3 (2022-03-28) diff --git a/dev/network.html b/dev/network.html index 4e504c2f..de2f8279 100644 --- a/dev/network.html +++ b/dev/network.html @@ -20,7 +20,8 @@ POST XHR (Data: JSON String) POST XHR (Massive Resp) OPTIONS XHR - XHR Stream + XHR Chunked: flv + XHR Chunked: json
@@ -43,6 +44,7 @@ sendBeacon Axios: GET + Axios: POST Scrolling Cross Domain
@@ -295,9 +297,9 @@ }); } -function xhrStream() { +function xhrStream(format = 'flv') { vConsole.show(); - const url = './data/stream.flv?id=' + Math.random(); + const url = `./data/success.${format}?chunked=1&id=` + Math.random(); const xhr = new XMLHttpRequest(); xhr.timeout = 11000; console.log('xhr type:', typeof xhr, xhr instanceof XMLHttpRequest); @@ -356,26 +358,7 @@ } function axiosRequest(method) { - console.info('axiosRequest() Start'); - axios({ - method, - url: './data/success.json?method=axios&r=' + Math.random(), - headers: { 'content-type': 'application/x-www-form-urlencoded' }, - data: { - foo: 'bar' - } - }) - .then(function(response) { - console.log('axiosRequest response:', response); - }) - .catch(function(error) { - console.log('axiosRequest error:', error); - }); - console.info('axiosRequest() End'); -} - -function axiosRequest(method) { - console.info('axiosRequest() Start'); + vConsole.show(); axios({ method, url: './data/success.json?method=axios&r=' + Math.random(), @@ -390,7 +373,6 @@ .catch(function(error) { console.log('axiosRequest error:', error); }); - console.info('axiosRequest() End'); } function optionsXHR() { diff --git a/src/network/helper.ts b/src/network/helper.ts index 40258502..91c487c9 100644 --- a/src/network/helper.ts +++ b/src/network/helper.ts @@ -33,7 +33,6 @@ export const genGetDataByUrl = (url: string, getData = {}) => { * Generate formatted response data by responseType. */ export const genResonseByResponseType = (responseType: string, response: any) => { - console.log('genResonseByResponseType', responseType); let ret = ''; switch (responseType) { case '': diff --git a/src/network/xhr.proxy.ts b/src/network/xhr.proxy.ts index 5ed14d2b..0166fde3 100644 --- a/src/network/xhr.proxy.ts +++ b/src/network/xhr.proxy.ts @@ -26,6 +26,9 @@ export class XHRProxyHandler implements ProxyHandler implements ProxyHandler { // console.log('Proxy open()'); const method = args[0]; @@ -109,7 +112,7 @@ export class XHRProxyHandler implements ProxyHandler { // console.log('Proxy send()'); const data: XMLHttpRequestBodyInit = args[0]; @@ -119,6 +122,17 @@ export class XHRProxyHandler implements ProxyHandler { + if (!this.item.requestHeader) { + this.item.requestHeader = {}; + } + this.item.requestHeader[args[0]] = args[1]; + this.triggerUpdate(); + return target.setRequestHeader.apply(target, args); + }; + } + protected setOnReadyStateChange(target: T, key: string, value) { return Reflect.set(target, key, (...args) => { this.onReadyStateChange(); diff --git a/webpack.serve.config.js b/webpack.serve.config.js index 3bb8ed04..d8560bed 100644 --- a/webpack.serve.config.js +++ b/webpack.serve.config.js @@ -25,7 +25,9 @@ module.exports = (env, argv) => { ], onBeforeSetupMiddleware(devServer) { devServer.app.all('*', (req, res) => { - if (req.path.includes('.flv')) { + const fileType = req.path.split('.').pop(); + // console.log('Req:::', fileType, req.query) + if (fileType === 'flv') { res.set({ 'Content-Type': 'video/x-flv', // 'Content-Type', 'application/octet-stream', @@ -50,13 +52,23 @@ module.exports = (env, argv) => { } else { const delay = req.query.t || Math.ceil(Math.random() * 100); setTimeout(() => { - res.status(req.query.s || 200); const filePath = Path.join(contentBase, req.path); try { fs.accessSync(filePath, fs.constants.F_OK); - // res.send(fs.readFileSync(filePath)); - res.sendFile(filePath); + res.type(fileType); + res.status(req.query.s || 200); + if (req.query.chunked) { + res.set({ + 'Transfer-Encoding': 'chunked', + 'Connection': 'keep-alive', + }); + res.write(fs.readFileSync(filePath)); + } else { + res.send(fs.readFileSync(filePath)); + } + // res.sendFile(filePath, options); } catch (e) { + res.status(404); res.end(); } // console.log(req.query);