场景

echosong 回长沙两个多月了, 新公司的创业项目 App , 小程序, 公众号。 目前差app 没有 做完。 公众号在前端小美女同事 的主导下采用前端比较火的Vue 技术框架。 一直一来主要方向后端 +架构+ 管理方向。长沙的IT环境不比上海, 回来基本上全栈都要做,乃至技术意外的培训,市场。

面的辐射性扩张, 对于技术一条道走到黑的方向已经开始形成了挑战,希望未来打破职业 年龄瓶颈 运气不要太差。

言归问题

Vue+npm + webpack 相关的技术生成单页的整站应用, 自从开发完上线到目前,一直存在一个不能解决的问题。 访问时候偶尔回出现以下问题

(Uncaught TypeError: Cannot read Property 'call' of undefined) ,重现刷新下基本上又能进入。概率大概又个 10%

解决方案

初步解决

之前以为跟 webpack 打包相关, 目前对前端的驾驭,没有从根本去解决。但是出现问题的时候都是index.html 能正常加载出来,js 相关不能加载,多刷新下就能正常,基于这个前提想到了,在入口文件index.html加入了以上代码

 var refush = setInterval(function () {
console.log('刷新补救');
var style = window.getComputedStyle(loading);
if ( style.display === 'none') {
clearInterval(refush);
} else {
location.reload(true);
} }, 2000)

问题解决了一大半,正如log 打印,只是一种打不开的时候补救,未能冲根本上解决问题。

彻底解决

周末都是加班,没有休息过,昨天周日终于给自己放了个假,但是心里装着问题未解决,对于一个对技术很产品有追求的人来说,这是一种煎熬,让你没办法正常享受休息时光。 于是专门花一天时间来研究这个问题

找问题点思路:

1 、 之前这个问题曾经让前同事专门做前端的大牛帮我看,他在上海那边一直刷新,无论怎么样访问死活重现不了问题,让其他地区的小伙伴页试试了下也没有此问题

2、 打包线上才会出现这种问题,本地也没出现过

4、 再抓包看 每次加载js次序不一样

5 、 最奇怪的时候每次还会加载一个 ip 地址相关的东西,而本地报,和其他地区的包不存在

综上症状,我开始去查看会不是是哪里配置有问题,但是对比了一圈下来无果, 于是 一艘那个奇怪的ip



似乎结果开始浮出水面, 长沙地区的电信,自然想到的DNS 劫持,愤怒之下 发泄对长沙电信的恶行谴责!!

怎么解决

得知了是dns 劫持,每次劫持的js 地址不一样,他是劫持了我的脚本,然后注入了自己的一段脚本 最后在加载我的原来那个js。这样一来改变了 js 加载的次序,因为VUe框架打包的东西,加载次序是要控制的。这样一来改变了加载js 次序,那么就会导致运行程序出现最初的错误。

这种针对域名的劫持,也没有什么其他的解决办法 无非

  1. 程序执行次序调整(这个基本上不好办,因为是npm run build 以后的机制)

  2. 换域名(电信的这种注入他也是有选择性的针对预约注入,如果换个域名可以解决,但是这不符合业务上的诉求)

  3. http 换成 https 传输过程中https 需要证书,这种dns 劫持的注入是注入不了的

最终选择了第三种解决办法。整个问题得到了彻底解决。

记一次前端问题解决历程(Cannot read Property 'call' of undefined)的更多相关文章

  1. 记一起和前端没什么卵关系的OPTION 405问题

    记一起和前端没什么卵关系的后端405问题 问题的关键点在于本来是POST请求,会变成OPTION请求,并且提示405报错,会类似跨域.并且只有某些手机机型才会(如Oppo系列). 其实跨域的问题,如果 ...

  2. 记第一次web前端校招笔试

    是的,我今晚跑到隔壁学校参加某电商公司的宣讲会+现场笔试.只有俩字可以形容:苦笑! 在寝室复习了下以前学习的关于前端方面的知识,重点是JavaScript,javaweb开发技术(jsp+servle ...

  3. 前端学习历程--js--原型&闭包

    一.数据类型 1.值类型:undefined, number, string, boolean,不是对象 2.引用类型:函数.数组.对象.null.new Number(10)都是对象 3.引用类型判 ...

  4. [mvc]记一次“项目”的历程

    大二上半学期因为选修课的原因,答应帮老师完善学院的选课系统.在这之前没有做过一个可以成为“项目”的项目,本着挑战自己的原则和可以不上选修课的福利,断断续续用了一学期的时间来完善这个选课系统. 接受这个 ...

  5. Mysql乱码问题解决历程

    可能是因为看了太多网上的关于这个问题的解决办法,可能当时是我自己没有看明白也或许是情况不一样,反正都没有解决我当初遇到的问题,现在想想可能是自己当初太无知了,第二个原因是原来大多数情况下是在windo ...

  6. WIN XP SP2系统经常性死机问题解决历程

    如题: 1.初始时,XP还能进入系统,等系统3分钟左右,鼠标熄灭,键盘无反应,查看资源管理器CPU 100%,内存占用不高. 2.现象初步分析: a.怀疑是病毒占用CPU 100%,于是下载360安全 ...

  7. 记一次前端CryptoJS AES解密

    1.背景 业务需求,需要联动多个平台,涉及到各平台的模拟登录. 已知加密前明文且正常登录.(无验证码要求) 某平台验证验证方式为.\login接口POST一串json字符串 { "accou ...

  8. 前端学习历程--http与https

    一.CA(证书授权中心)证书 1.ca是通信的中介,具有足够的权威性 2.信任可嵌套如:C 信任 A1,A1 信任 A2,A2 信任 A3 二.根本区别 1.https需要基于ssl的ca证书认证(判 ...

  9. 前端学习历程--vue

    ---恢复内容开始--- 一.对比其他框架 1.react: 共同点: 使用 Virtual DOM 提供了响应式(Reactive)和组件化(Composable)的视图组件. 将注意力集中保持在核 ...

随机推荐

  1. PID控制算法的C语言实现四 增量型PID的C语言实现

    /*------------------------------------------- 2 位置型PID C实现(控制电机转速) --------------------------------- ...

  2. Hdu1828 Picture

    Picture Time Limit: 6000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Sub ...

  3. 洛谷P2563 [AHOI2001]质数和分解

    题目描述 任何大于 1 的自然数 n 都可以写成若干个大于等于 2 且小于等于 n 的质数之和表达式(包括只有一个数构成的和表达式的情况),并且可能有不止一种质数和的形式.例如,9 的质数和表达式就有 ...

  4. mac调教指南

    最近入手了一个mac,  在此记录下调教的过程. http://note.youdao.com/noteshare?id=5d1eedffab5cb47d4f53970c2ec937aa

  5. bzoj 3209 bzoj1799 数位dp

    3209: 花神的数论题 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 2267  Solved: 1040[Submit][Status][Disc ...

  6. nodejs使用场景

    NodeJS的工作原理其实就是事件循环.可以说每一条NodeJS的逻辑都是写在回调函数里面的,而回调函数都是有返回之后才异步执行的! 既然NodeJS处理并发的能力强,但处理计算和逻辑的能力反而很弱, ...

  7. nova-virt与libvirt

    源码版本:H版 nova通过nova/virt/driver.py中的ComputeDriver对底层虚拟化技术进行抽象,不同的虚拟化技术在nova/virt下有不同的目录,里面均有driver.py ...

  8. Debian9(8)下python3和python2同时安装如何使用pip

    在bash下Python会调用python2.x python3会调用python3.x 如果使用pip install命令安装模块会安装python2的模块. 而python3的pip命令使用的是p ...

  9. Flask---使用Bootstrap新建第一个demo

    Flask---使用Bootstrap新建第一个demo 参考自http://www.jianshu.com/p/417bcbad82fb 还有<Flask web开发> 前端用到Boot ...

  10. 【CodeForces】913 D. Too Easy Problems

    [题目]D. Too Easy Problems [题意]给定n个问题和总时限T,每个问题给定时间ti和限制ai,当解决的问题数k<=ai时问题有效,求在时限T内选择一些问题解决的最大有效问题数 ...