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

讨论完方案之后,撸起袖子开始干。首先用 vue-cli 快速搭建项目,既然是前后端分离,那接口肯定要做一下转发,这都不算事,webpackdevServer 集成了 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 跑起来,然而,出现了这一幕:

chrome请求报错
chrome请求报错
错误信息
错误信息

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

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

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

node请求报错
node请求报错

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

终端错误
终端错误

CERT_HAS_EXPIRED

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

node官方文档

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

https错误
https错误

最终在 stackoverflow 找到了解决方案

stackoverflow
stackoverflow

试一下效果

node请求成功
node请求成功

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

http-proxy-middleware
http-proxy-middleware

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

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

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