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

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

分为两个部分：

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

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

主体结构是这样：

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

配置mockJs

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

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

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

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

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

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

{
	"user|4":[{
        "name": "@cname",
        "id":"@integer(10000, 99999)",
        "sex":"@cword('男女')",
        "classname":"@cword('一二三四五六七八九十',1)班",
        "grade|":"@cword('一二三四五六七八九十')年级"
      }]
}

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

url: url, //指定api的访问路径
filepath: filepath, //文件路径
describe: describe, //api说明

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

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

配置webpack

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

在webpack.config.js配置文件中找到devServer的配置项，加入proxy的配置：

proxy: {
'/api/*': {
      target: 'http://localhost:3000',
      secure: false
   }
},

对应js中使用ajax请求：

$.ajax({
    url:"/api/check",
    type: "post",
    data:{'id':123123},
    dataType: "json"
}).done(function (data) {
    for(var i in data.data.user) {
        var item = data.data.user[i];
        $("body").append("<br/>" + item.name);
    }
});

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