Webpack设置代理，实现前后端分离开发

最近做的项目是前后端分离进行开发的，在后端给到前端接口前，需要前端自己去mock数据完成开发。因此查阅了一些资料，整理如下。

前后端分离的三种方式

关于mock数据，在目前互联网行业 web 产品开发中，前后端大部分都是分离开发的，前端开发过程中无法实时得到后端的数据。这种情况下，一般会使用三种方式：
模拟静态数据：即按照既定的数据格式，自己提供一些静态的JSON数据，用相关工具（如fis3）做接口来获取这些数据。该形式使用比较简单的、只用 get 方法的场景。
模拟动态接口：即自己用一个 web 框架（如使用express，koa），按照既定的接口和数据结构的要求，自己模拟后端接口的功能，让前端项目能顺利跑起来。该方式适用于新开发的项目，后端和前端同时开发。
转发线上接口：项目开发中，所有的接口直接用代理获取线上的数据，post 的数据也都直接提交到线上。该方式适用于成熟项目中。

使用 webpack-dev-server 的代理

但是有一个问题，那就是后端的服务会起在另外的端口或者域名上，这时获取数据会发生跨域的问题。此时我们可以运用webpack-dev-server 做一个代理的转发，配置代码在webpack.config.js中。如：

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

这段代码的意思是凡是 /api 开头的 http 请求，都会被代理到 localhost:3000 上。将 http://localhost:3000替换成你后端接口的地址即可。
至此，通过webpack的代理，我们成功突破了跨域的问题，实现了前后端分离开发。

参考文章

• 使用fetch