Webpack:使用mockJs进行跨域调试的方法

By
写代码

有时候本地开发要测试远端接口数据,由于跨域问题的存在,经常用到的方法无非是要么把前端内容给集成到服务器,要么拿json写假数据在本地调试,虽然webstorm的本地载入json也挺方便,但是毕竟脑中数据量有限,而且有时候后台接口会根据需求变来变去,还要考虑这部分沟通成本。

举例子来说,本地开发一个SPA(single page app)或者类似多页面应用,在9090端口测试。这个应用需要请求服务器数据,可能来自远端,或者跑在本地其他接口上(3000),虽然在同一台服务器,也存在跨域问题(cross-domain error)。如果是后端,可以直接集成到一个项目里,或者使用一些特殊技术手段(php或者java搞个代理过滤)。但是在前端的时候如何绕过这个问题,就是本文讨论的主题。

分为两个部分:

1、用mockJs来制作假数据,放在本地(或其他)服务器上;
2、webpack-dev-server使用代理方式,载入目标服务器资源,解决跨域问题。

之所以会放到一起,是因为使用webpack-dev-server来代理是在折腾mockJs过程中偶然发现的,而且配合着看起来还不错。

主体结构是这样:
web-dev-server-proxy

首先,需要用webpack新建一个项目,并使用webpack-dev-server调试。参考之前的webpack介绍 webpack介绍 ,clone到本地然后install一下。

配置mockJs

如果不需要mockJs来做假数据,可以直接跳到下一部分。

mock.js的官方网站是这么介绍的:

mock.js是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试。提供了以下模拟功能:

根据数据模板生成模拟数据
模拟 Ajax 请求,生成并返回模拟数据
基于 HTML 模板生成模拟数据

mock.js的使用可以参考官方示例和文档官方页面

比如这里简单配置了一个mock.js的配置文件,用于指定api的字段和对应内容。

而使用express-mockjs这个插件主要考虑本地需要:使用json文件来提供模拟数据,并且要求可自定义路径。对比了一些轮子之后决定使用这个。除了满足以上的需求,还加入了一些简单的配置项,主要包括:

直接配置工程即可得到如下界面:

mockJs

按照URL访问不同的api,即可模拟接口数据。

配置webpack

webpack中可以配置proxy,这个选项使用了http-proxy-middleware。按照webpack的说明,可以根据该插件的选项说明(https://github.com/chimurai/http-proxy-middleware#options)进行高级配置。进一步的代理匹配本在本篇讨论范围。

webpack.config.js配置文件中找到devServer的配置项,加入proxy的配置:

对应js中使用ajax请求:

这样,使用webpack-dev-server调试时,即可根据proxy的设置,拦截本地接口请求并映射到target的配置中,以此来迂回解决跨域调试的问题。或者也可以直接代理后台的接口到本地,只需要修改target的路径即可实现。

Comments: 0

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

:razz: