Vue CLI 2.x本地开启https运行并代理后端https接口

2021年11月24日 阅读数:8
这篇文章主要向大家介绍Vue CLI 2.x本地开启https运行并代理后端https接口,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

1.本地生成证书

# 进入项目并在build下新建cert目录
cd ./your-projuct/build && mkdir cert

# 进入cert目录
cd cert

# 使用openssl生成私钥
openssl genrsa -out private.key 1024

# 使用上面生成的私钥生成证书 其中的Common Name输入后端接口的host
openssl req -new -key private.key -out csr.key

# 生成证书签名文件
openssl x509 -req -days 3650 -in csr.key -signkey private.key -out file.crt

2AEF2C7C-0AF4-4443-B4EE-FD8E05D33980.png
(在第四步生成的私钥生成证书时,其中的Common Name配置输入后端接口的host)javascript

2.修改本地启动项目的配置文件

app.js 或者 ./build/dev-server.js,这里截取部分改动代码java

const opn = require('opn');
const path = require('path');
const express = require('express');
const webpack = require('webpack');
const proxyMiddleware = require('http-proxy-middleware’);
const webpackConfig = require('./webpack.dev.conf');

const app = express();
const compiler = webpack(webpackConfig);
.
.
.
// 新增部分
const fs = require('fs');
const https = require('https’);

const privateKey = fs.readFileSync(path.join(__dirname, './cert/private.key'),'utf8');
const certificate = fs.readFileSync(path.join(__dirname, './cert/file.crt'),'utf8');
const credentials = { key: privateKey, cert: certificate };
const server = https.createServer(credentials, app);

server.listen(port);

3.重启项目

3.1 问题:Chrome浏览器没法处理杂乱凭据,没法访问https localhost url

00DDDE7A-5944-4C56-B6F1-1D6BBEE928A9.png

解决:点击页面任意处,直接使用键盘输入 thisisunsafe 后回车便可正常访问webpack

3.2 问题:没法访问后端接口,报错DEPTH_ZERO_SELF_SIGNED_CERT

2C241441-9C69-4B38-ABB9-CB3F5987E57F.png

解决:须要在proxyTable的每一个对象中增长secure:falseweb

// 每一个对象中增长secure:false
const proxyHost = 'https://www.your-domain.com';
const proxyTable = {
    '/YOURKEYWORD': {
    target: proxyHost,
    changeOrigin: true,
    secure: false
}