宅小歪前端攻城师Mobile Debug作者
一往无前的唯一力量就是热爱你所做的一切。
Copyright 宅小歪 © 2013-2021
webdesigners56756FDSFSD131JHRFWQHJY2YHHJD==@zhaixiaowai.356fsdfjdsaka23afsdw==com
-
在webpack/vue中控制devServer的proxy并发数
在开发过程中如果存在并发请求,并且请求不会及时返回时,会出现页面所有请求被卡住的现象,在devServer中添加如下配置并重新运行项目即可.
module.exports = { devServer: { proxy: { '/api': { target: 'https://ui.marklion.cn', changeOrigin: true, // 其他代理配置... // 在这里添加自定义的配置 onProxyReq: (proxyReq) => { // 根据自己情况配置代理的并发数 // 例如,限制每个代理请求的并发数为10 proxyReq.agent.maxSockets = 10; }, }, }, }, };
发表于 2023-09-04-Comments阅读次数:- -
webpack-dev-server配置了changeOrigin依然无效的解决方案
webpack-dev-server配置了changeOrigin依然无效的解决方案,出现这种情况时因为changeOrigin=true时,底层只会将request-header中的host字段修改,并不会修改Origin字段,同时会在request-header中添加x-forwarded相关字段传递代理前的信息,部分站点会获取x-forwarded信息做来源检测,使用以下配置绕过以上问题:
devServer: { disableHostCheck: true, proxy: { '/api': { target: 'http://www.marklion.cn/', changeOrigin: true, pathRewrite: { '^/api': '/' }, headers:{ //改写Origin,注意结尾不含 / Origin:"http://www.marklion.cn", //改写Referer Referer:"http://www.marklion.cn/", }, "onProxyReq": (request, req, res) => { //移除x-forwarded相关header request.removeHeader('x-forwarded-host'); request.removeHeader('x-forwarded-proto'); request.removeHeader('x-forwarded-port'); request.removeHeader('x-forwarded-for'); } } } }
发表于 2022-04-11-Comments阅读次数:- -
使用JS实现无损缩短guid/uuid的长度到22位
将guid/uuid的长度无损缩短到22位
/** * The MIT License (MIT) Copyright (c) 2020 ZhaiXiaoWai(https://www.zhaixiaowai.com) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ const conversionChar = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz_-"; let _conversionCharIndex; const getConversionCharIndex = function () { if (_conversionCharIndex) return _conversionCharIndex; _conversionCharIndex = {}; for (let index = 0; index < conversionChar.length; index++) { const char0 = conversionChar[index]; _conversionCharIndex[char0] = index; } return _conversionCharIndex; }; export class ShortGuid { /** * 简化guid,缩短到22位 * @param {string} guid */ static short(guid) { if (guid.length !== 36) { throw "guid格式异常"; } let value = "0" + guid.replace(/-/g, ""); if (value.length !== 33) { throw "guid格式异常"; } let result = ""; for (let index = 0; index < 11; index++) { let start = index * 3; const str = parseInt(value[start] + value[start + 1] + value[start + 2], 16); result += conversionChar[Math.floor(str / 64)] + conversionChar[str % 64]; } return result; } /** * 复原guid * @param {string} shortGuid */ static restore(shortGuid) { if (shortGuid.length !== 22) throw "short-guid格式异常"; let conversionCharIndex = getConversionCharIndex(); let result = ""; for (let index = 0; index < 22; index += 2) { let u = (conversionCharIndex[shortGuid[index]] * 64 + conversionCharIndex[shortGuid[index + 1]]).toString(16).padStart(3, "0"); if (index === 0 && u[0] === "0") { u = u.substr(1); } result += u; } return `${result.substr(0, 8)}-${result.substr(8, 4)}-${result.substr(12, 4)}-${result.substr(16, 4)}-${result.substr(20)}`; } }
缩短guid/uuid
发表于 2020-09-02-Comments阅读次数:- -
使用代码找出i跟row的规律
一日,I君问有两个变量i和row如下分布,如何用js找出i跟row的规律.
i row 0 1 1 2 2 3 3 4 4 3 5 2 6 1 7 2 8 3 9 4 10 3 ... ...
遂答:
发表于 2020-05-07-Comments阅读次数:- -
基于原生JS实现的简单的HTML5多图预览上传功能
基于原生JS,主要功能为HTML5本地预览+ajax多图片资源提交,服务端采用nodejs简易搭建.
关键知识点:FileList File FormData URL.createObjectURL
发表于 2020-03-04-Comments阅读次数:- -
在JS中获取webpack传入的自定义参数以及package.json中的数据
demo中展示的是获取自定义参数 --channel 以及package.json中的version信息,并按照channel信息编译输出到不同的dist文件夹
发表于 2020-02-21-Comments阅读次数:- -
配置webpack,让输出的JS支持ES6-Module的export和import
如果你要编写一些公共库提供给其他人引用,你希望以export的导出形式让对方import引入,那 @purtuga/esm-webpack-plugin 这个插件适合你。
具体配置如下:
发表于 2019-06-25-Comments阅读次数:- -
如何优雅的通过ES6实现将1个Class按功能拆分成若干个子模块文件
在class出现之前,我们实现一个类通常通过定义1个function A,并在A.prototype上定义方法和属性,例如:
function Browser (soft) { ///<summary>软件api</summary> ///<field name="parent" type="ZXYSoft">soft根</field> ///<field name="Size" type="Sizes">各种窗体大小值</field> ///<field name="Location" type="Locations">各种窗体坐标值</field> this.parent = soft; this._ver = undefined; this.Size = new Sizes(); this.Location = new Locations(); }; Browser.prototype._webkitVer = function () { /// <summary>webkit底层版本号(1000表示旧版本,1001表示qt-webkit)</summary> /// <returns type="Number" /> if (this._ver == null) { if (this.parent.isApp) { var ver = this.parent.APP.ver; this._ver = typeof ver === "number" ? ver : 1000; } else { this._ver = 1000; } } return this._ver; }; Browser.prototype.appname = function () { ///<summary>应用名(exe名)</summary> ///<returns type="String" /> if (this.parent.isApp) { var appname = this.parent.APP.appname; return typeof appname === "string" ? appname : ""; } return ""; };
发表于 2019-06-04-Comments阅读次数:- -
使用js解析H264流的sps数据获取分辨率和fps信息
c原文路径 :https://blog.csdn.net/caoshangpa/article/details/53083410
调用方式
发表于 2019-05-17-Comments阅读次数:-