开发环境模拟开启HTTPS服务

主要解决的问题

  • 开发环境中,使用只支持 https 服务的Web API,例如: navigator.clipboard 操作系统剪贴板、navigator.mediaDevices访问相机或麦克风等媒体输入设备 等
  • 解决 CookieSecure属性设为 true后,非 HTTPS 的服务和后端无法传输 Cookie的问题

Vue-cli3项目

  • 打开vue.config.js配置文件,若不存在,在项目的根目录中新增
  • 将配置devServer的 https属性设置为 true
  • 重启项目,done

Vue-cli2.+项目

  1. 生成本地证书(以下操作默认都是在项目的跟目录中进行)
  • build 目录下新建一个目录 cert
  • 生成私钥key文件
openssl genrsa 1024 > ./build/cert/private.pem 
  • 通过上面生成的私钥文件生成CSR证书签名,根据要求填写一些必要的值
openssl req -new -key ./build/cert/private.pem -out ./build/cert/csr.pem 
  • 通过上述私钥文件和CSR证书签名生成证书文件
openssl x509 -req -days 365 -in ./build/cert/csr.pem -signkey ./build/cert/private.pem -out ./build/cert/file.crt

2. 修改项目中的配置

  • Express 开启的服务
 // 打开build/dev-server.js文件,写入以下代码
 const https = require('https') 
 const fs = require('fs')

 const privateKey = fs.readFileSync(path.join(dirname, './cert/private.pem'), 'utf8')
 const certificate = fs.readFileSync(path.join(dirname, './cert/file.crt'), 'utf8')
 var credentials = {key: privateKey, cert: certificate}

 // 在 var port = process.env.PORT || config.dev.port 新增一行
 var httpsPort = process.env.httpsPort || config.dev.httpsPort

 // 在 var server = app.listen(port) 后面加入下面几行代码开启https服务 
 var httpsServer = https.createServer(credentials, app) 
 httpsServer.listen(httpsPort)
  • webpack-dev-server 开启的服务
// 1. 复制 webpack.dev.conf.js 文件,命名 webpack.dev.https.conf.js,写入以下代码
 const fs = require('fs')
 ...
 devServer: {
   ...
   https: {
     key: fs.readFileSync(path.join(**dirname, './cert/private.pem'), 'utf8'),
     cert: fs.readFileSync(path.join(**dirname, './cert/csr.pem'), 'utf8'),
     ca: fs.readFileSync(path.join(**dirname, './cert/file.crt'), 'utf8')
   }
   ...
 }

// 在 package.json 文件中,新增如下配置
"scripts": {
  ...
  "https": "webpack-dev-server --inline --progress --https --config build/webpack.dev.https.conf.js --open"
  ...
}

3. 通过Express开启的服务,经过如上配置后同时开启了http https的服务,可以做如下调整

// 在package.json文件,新增如下配置
"scripts": {
    ...
    "https": "cross-env NODE*ENV=local HTTP*TYPE=HTTPS node build/dev-server.js"
    ... 
}

 // 修改build/der-server.js配置
 var server = app.listen(port) // 去掉该行

 var uri = process.env.HTTP*TYPE === 'HTTPS' ? 'https://domain:' + httpsPort : 'http://domain:' + port

 var server 
 if (process.env.HTTP*TYPE === 'HTTPS') {
     server = https.createServer(credentials, app)
     server.listen(httpsPort)
 } else {
     server = app.listen(port)
 } 

总结

项目开发中经常有本地开发环境连 HTTPS 协议的接口,但是这样本地的 HTTP 协议的服务就无法和后端传输 Cookie 的 Secure 设为 true 的值。可以通过本地开启一个 Nginx服务做代理或者手动写 Cookie的方式,感觉有点麻烦。因此整理了一下,希望能帮助到同样遇到此问题的小伙伴。当然网上也有很多同样的教程,我也是一个个坑踩过来的✌️

  • 不同版本的Vue-cli构建的项目结构会有差异,但是都是同样的原理
  • Mac自带Openssl,关于Windows下如何安装Openssl,请自行百度😁

以上处理过程写得很针对也较简便,有错误或者不清楚的地方,请告知 Thanks♪(・ω・)ノ。(由本地 md 文档导入,格式难搞呦,先这样吧)