最近在对一个老项目前端部分进行重构，由于该项目中有一部分是用 vue 写的，所以重构的技术选型自然而然就是 vue 了。重构的目标是前后端分离，让前端代码可以更好的被维护。

讨论完方案之后，撸起袖子开始干。首先用 vue-cli 快速搭建项目，既然是前后端分离，那接口肯定要做一下转发，这都不算事，webpack 的 devServer 集成了 http-proxy-middleware 这个中间件，转发接口so easy。

由于后端提供的接口不是 restful 风格的，也没有个统一的 prefix ，这样就需要将所有的接口列举出来，然后遍历转发，所以为了让 proxy 配置更加简单，需要在请求的时候做一些处理，如果是 development 环境 ，就统一加上一个 prefix ，如果是 production 环境就不加，vue-cli 已经帮我们集成好了环境变量，所以只要在统一封装的 http 请求中加上一行就好了：

const prefix = process.env.NODE_ENV === 'development' ? '/api' : '';

webpack 中配置也很简单：

// config/index.js

/* some config code */


proxyTable: {
    '/api': {
        target: 'https://xxx.dev.com/',
        changeOrigin: true,
        pathRewrite: {
            '^/api': '/'
        }
    }
}

/* some config code */

是的，就是这么简单，npm run dev 跑起来，然而，出现了这一幕：

500 服务器又打盹了？但是这个返回信息不像是服务器返回的信息啊，咋回事？

• 会不会是我配置错了？不应该啊，这么简单怎么可能配置错呢？
• 是接口的问题？也不可能啊，postman 可以跑的通啊。
• 难道是后端做了处理，禁止转发？更不可能啊，有这技术还不把爬虫搞死。

要不我用 node 来请求一下试试看吧，但是。。。还是报错了

错误信息：certificate has expired 。虽然我的英语很垃圾，但是还是能猜出来啥意思 证书过期。等等，这个错误在重点里面也出现了：

CERT_HAS_EXPIRED

不要慌，既然终端有提示，那咱就点进链接去看看，然而我并没有在提示的链接中找到任何相关的错误信息

这一刻，我感觉我被针对了，但是依旧不能慌，冷静思考一下，证书是啥玩意，好像有点印象，https 需要 SSL 证书，而且我转发的这个接口确实是 https 。真相浮出水面了，当我用浏览器打开转发的这个接口时，也就更加确信了我的想法

最终在 stackoverflow 找到了解决方案

试一下效果

破费！完美解决这个问题！BTW ， 怎么在 webpack 中解决呢，我试了在所有的配置文件中加上这一行神奇的代码，但是都没有效果，甚至借助了 cross-env 这个包在启动时修改环境变量，但最终都无济于事。难道要我去改 webpack 的源码吗？配置都那么头疼了，更别说改了。去给官方提个 issue ？ 一时半会也不会有人回应的。就在穷途末路之时，我有打开了 http-proxy-middleware 的 npm 主页，然后我发现了这一行

一口老血喷了出来。为什么我这么懒不愿意去看文档！为什么我英语这么差读不懂文档！到底为什么！！！！

总结：** http-proxy-middleware 转发不安全的 https 一定要将 secure 设置为 false**

再总结：程序员已经要好好读文档，好好学英语。