2016年金山云企业网盘系统跨浏览器兼容性技术方案

项目背景与业务价值

2016年，我在金山云负责企业网盘产品的前端开发工作。当时国内企业级软件仍需要大量支持IE浏览器（IE8/9市场占有率仍然很高）。该项目是金山云重要的企业级产品，直接服务于众多大型企业客户，对公司的企业服务战略具有重要意义。

团队构成与个人角色

在金山云的这个项目中，我是唯一的前端开发工程师，负责所有前端相关工作，包括：

Web端整体架构设计
与PC客户端的通信方案设计
跨浏览器兼容性解决方案
前端性能优化

团队构成：

前端开发（1人）：我个人，负责所有前端相关工作
PC客户端团队（2人）：负责C++客户端开发
后端团队（2人）：提供API支持
产品经理（1人）：负责产品规划和需求对接

作为唯一的前端开发，我需要：

完成技术方案的调研和决策
与PC客户端团队密切配合，设计浏览器与客户端的通信方案
确保产品在各种浏览器环境下运行

技术挑战与解决方案

1. 跨域通信基础方案

客户端的服务地址为 http://127.0.0.1:15000/startapp，需要通过POST方法传输数据。由于数据量大且包含文件信息和token信息，无法使用JSONP方案。经过调研，决定采用CORS方案作为基础通信方案。

解决方案：

// C++客户端设置CORS
Access-Control-Allow-Origin: http://foo.example //表明服务器允许http://foo.example的请求
Access-Control-Allow-Origin: * //表明服务器允许所有请求

2. IE8/9专项兼容

在测试过程中发现IE8/9环境下请求失败。通过源码分析发现，IE10以上版本的XMLHttpRequest已原生支持跨域请求，而低版本IE需要使用专有的XDomainRequest对象。

查看 Angularjs 源码发现 是没有这个
function createXhr() {
  return new window.XMLHttpRequest()
}

解决方案：使用 jquery.xdomainrequest 插件引入后在 IE9 下发起请求成功返回

3. HTTPS混合内容处理

网站是 https 协议的，访问本地客户端是 http,这些浏览器在请求还未发出的时候就会拦截请求。在Chrome和Firefox等现代浏览器中，当HTTPS页面请求HTTP资源时会被浏览器安全策略拦截。这是由于混合内容（Mixed Content）限制导致的。

解决方案：通过分析百度云盘的请求发现是用了Flash跨域代理方案,然后再 github 上找相关插件下载下来这个模块

cors-proxy-browser-master

这个模块主要是把 html 代码添加相应的 flash 属性我们直接把改变后的代码加到页面中把生成的过程代码给注释掉

<span style="position:absolute;top:0;left:0">
  <object type="application/x-shockwave-flash" data="/dist/common/crossxhr.swf" width="1" height="1" id="FlashHttpRequest_gateway" style="visibility: visible;">
         <param name="wmode" value="transparent">
         <param name="allowscriptaccess" value="always">
    </object>
    </span>

项目成果与个人成长

项目直接成果：
- 支持了超过95%的企业用户浏览器环境
- 产品稳定运行，客户满意度达到90%以上
- 帮助金山云成功签约XX个大型企业客户
个人成长：
- 培养了解决复杂技术问题的能力
- 提升了跨团队协作和沟通能力
- 锻炼了技术方案调研和决策能力
- 开始建立了完整的前端技术体系思维，为我以后的日常工作增长了这方面的见识.
技术演进的思考：
- 2016年到现在（2024年），前端技术发生了翻天覆地的变化
- 作为开发者，要时刻保持技术敏感度
- 在资源有限的情况下，如何做出最优的技术选择
- 开发不等于单打独斗，要善于利用团队资源

这段经历让我深刻理解到：作为开发者，不仅要有扎实的技术功底，更要有全局视角和决策能力。这些能力在我后续的职业发展中发挥了重要作用。