基于HTTP请求拦截，快速解决跨域和代理Mock

对于 XMLHttpRequest 请求，在其 open 方法中解析请求，访问 AMP 根据响应结果判断是否需要继续发送原请求到后台服务器，一个 xhr 只有在其 send 方法被调用时才会真正的发起 HTTP 请求，而在 open 方法中无法获取到 send 方法传递的数据，所以拦截发生在 send 方法中。首先单独存储 send 方法中发送请求时的参数，然后直接返回，确保先不调用真正的 XMLHttpRequest 的 send 方法，将单独存储的参数生成对 AMP 的请求，执行上述 AMP 中的判断。

实例

1、定义与原生 XMLHttpRequest API 同名的接口，称为新的 XHR 接口;

2、重命名原生 XMLHttpRequest API 并添加到新的 XHR 接口;

3、在新的 XHR 接口中定义与原生 XMLHttpRequest API 同名的属性和方法;

4、在同名的 open 方法中解析 HTTP 请求，得到用来在 AMP 查询接口状态的参数(比如域名+请求方法+路径);

5、拦截将要发送的原请求，在同名的 send 方法中暂存原请求要发送的数据，暂停原请求的发送;

6、用 4 中的参数请求 AMP，查询接口状态，如果接口不存在或是已完成状态，则返回特殊标志，ApiProxy 取出 5 中暂存的数据，传递给原请求，并继续原请求的发送;否则，AMP 返回 mock 数据，ApiProxy 直接将该数据返回给原请求。

Fetch API

对于 Fetch API 而言，因为它是基于 Promise 实现的，拦截比较容易，只需要在 Fetch API 外层封装一个 Promise 入口，在其发起 fetch 请求前，先暂停原请求，解析数据请求 AMP，并等待响应，判断响应是否有特殊响应码，如果有则继续原请求，否则跳过原请求，直接返回 mock 数据。

启动前端代理功能

在前端实际开发中，可以借助打包工具，比如 webpack，自定义一个可配置的插件，开启后在开发环境中自动将代理拦截代码插入到主页面里，从而启动前端代理功能。

小结

本文提出的前端代理方法通过将代理职责下沉到前端，减少了 mock 服务器(或者接口管理平台)请求真实业务服务器步骤，同时将角色权限保持在前端请求中，进一步减少了代理所需要承担的工作量，从底层拦截 HTTP 请求的方法，绕过了利用浏览器插件做代理带来的浏览器兼容的问题。最后提供的利用打包工具(如 webpack)封装这种代理方法，实现快速插拔的前端代理。

本文作者：邓仲哲，马蜂窝社区研发团队前端开发工程师，主要负责社区管理后台，接口管理平台开发等工作。

附：参考资料

关于跨域:https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

关于XMLHTTPRequest:https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

关于Fetch:https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

【本文是51CTO专栏作者马蜂窝技术的原创文章，作者微信公众号马蜂窝技术(ID：mfwtech)】

戳这里，，看该作者更多好文

【编辑推荐】

1. 微博短视频百万级高可用、高并发架构如何设计？
2. 微服务架构，多“微”才合适？
3. IT架构的本质：工作12年，我的五点感悟
4. 披荆斩棘，饿了么数据库高可用架构演进！
5. 支撑百万并发的数据库架构如何设计？

（编辑：PHP编程网 - 黄冈站长网）

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