现在越来越多的 HTML5 API 要求 https 才能使用,比如 Geolocation. 虽然电脑上允许 localhost 在 http 时调用,但是很多时候,我们是为了移动设备开发,需要在手机上测试,常常用手机通过 ip 地址去访问电脑,于是就杯具的无法调用。以下仅针对 vue-cli 提一些简单的解决方案。
证书
可以自己生成一个凑合用。没有 openssl 的话,需要先装一个。
openssl genrsa -out key.pem
openssl req -new -key key.pem -out csr.pem
openssl x509 -req -days 9999 -in csr.pem -signkey key.pem -out cert.pem
方法一:nginx 反向代理(推荐)
nginx反向代理的好处是,顺便可以把 api 一起给代理了,解决了跨域问题。
假设你没改 vue-cli dev server的端口,然后有个 api 部署在 8081. 那么可以如下配置 nginx.
server {
listen 443 ssl;
server_name localhost;
ssl_certificate path to cert.pem;
ssl_certificate_key path to key.pem;
location / {
proxy_pass http://127.0.0.1:8080;
}
location /api {
proxy_pass http://127.0.0.1:8081;
}
}
方法二:直接改 vue-cli 的 dev server 配置
修改 build/dev-server.js
在顶部
const https = require('https')
const fs = require('fs')
在 module.exports 的上方
app.listen = function () {
var pkey = fs.readFileSync('path to key.pem', 'utf8')
var pcert = fs.readFileSync('path to cert.pem', 'utf8')
var options = {
key: pkey,
cert: pcert
}
var server = https.createServer(options, this)
return server.listen.apply(server, arguments)
}