快速解决跨域和代理Mock

的做法是有一个根据接口定义来自动生成数据的 mock 服务器，我们称为AMP(接口管理平台，API Manage Platform)，前端请求该服务器获取数据。

在这种场景下，如果有些接口已经完成开发，前端需要手动修改代码去设置不同接口的请求地址。当接口数量较多时，这种方法会变得非常低效。因此， AMP 一般也会同时提供代理功能，也就是指前端仍请求 AMP，AMP 会根据接口完成情况来决定返回 mock 数据，还是将请求再次代理到真实的业务服务器获取数据后返回。

但是这种方案的问题在于当涉及到需要角色权限验证的接口时，登录输入用户信息后在浏览器中会缓存 cookie，当访问与登录时同域名的接口时，浏览器会自动携带 cookie，由服务器解析 cookie 并鉴权后获取对应权限的接口数据。前端一般是在本地启动服务器进行开发，当业务服务器的接口完成开发，这时再采用请求 AMP 的方法切换接口数据，就会出现跨域的情况。

由于浏览器的安全机制决定跨域访问时无法携带 cookie，并且无法通过代码读取 cookie，因此通过代码传递 cookie 跨域不可行，而现有的解决方案也不***：

• 如果在 AMP 额外增加模拟登陆的功能，会因为所有接口的权限固定不变，无法适配一个接口对不同角色有不同权限而返回相应的数据;而且一旦鉴权的接口功能变更、失效等情况发生，都需要重写修改 AMP 的代理功能，代价较大。
• 如果利用浏览器插件保存登陆信息、提供代理，则需要兼容不同浏览器，成本太高。

针对上述技术问题，本文提出了一种可跨浏览器，并在前端实现的不侵入业务代码的代理方法。

基于 HTTP 请求拦截 实现前端接口代理

基于 HTTP 请求拦截实现前端接口的方式，从更底层的角度实现了接口开发完成前后的 mock 数据，及业务服务器真实数据之间的切换，并且解决了现有技术中由 HTTP 请求通过 AMP 代理到业务服务器产生跨域无法携带权限信息，导致无法按照角色权限返回请求数据的技术问题。

主要创新点

• 在更底层基于 XMLHttpRequest 和 Fetch API 实现拦截代理，不需要考虑主流浏览器类型，和 JavaScript 依赖的工具库;
• 在前端实现代理，保留了登陆信息，无需额外处理鉴权问题;
• 提供一种可以快速实现且可插拔的使用方式。

总的来说，这个方案提供了一种可快速实现，运行在前端浏览器中，且不依赖浏览器类型的请求代理方法。

设计思路

（编辑：通化站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!