Vue项目配置Https双向认证

访问双向认证的Https接口

本地运行设置

修改webpack配置

const fs = require('fs')
const options = {  
    //客户端密钥
    key: fs.readFileSync(path.join(__dirname, '../ca/key.pem')),  
    //客户端公钥
    cert: fs.readFileSync(path.join(__dirname, '../ca/cert.pem')),  
    //颁证机构证书
    ca: fs.readFileSync(path.join(__dirname, '../ca/ca.pem')),  
    //删除后会验证域名  
    checkServerIdentity: () => { return null; },  
    requestCert: true,  
};
......
devServer: {
    proxy:{  
        'api':{  
            target: "https://xxx.xxx.xxx.xxx:xxxx",  
            changeOrigin:true,
            //使用证书访问接口
            agent: new https.Agent(options),
            secure: true,  
            pathRewrite:{  
              '^/api':''  
        }
    }
}

Nginx服务器设置

修改nginx.cnf

server {
......

  location / {
      try_files $uri $uri/ index.html;
  }
  location /api {
    proxy_pass https://8.134.73.119:8088/;
    proxy_ssl_trusted_certificate /web_gantt/ca/ca.pem;
    proxy_ssl_certificate     /web_gantt/ca/cert.pem;
    proxy_ssl_certificate_key /web_gantt/ca/key.pem;
  }
}

认证浏览器证书

本地运行配置

修改webpack配置

    /*---------添加https配置---------*/
    https: true,
    key: fs.readFileSync(path.join(__dirname, '../ca/server-key.pem')),
    cert: fs.readFileSync(path.join(__dirname, '../ca/server-cert.pem')),
    ca: fs.readFileSync(path.join(__dirname, '../ca/ca.pem')),
    requestCert: true,
    /*---------添加https配置---------*/

Nginx服务器设置

修改nginx.cnf

......
  ssl                  on;
  ssl_certificate      /web_gantt/ca/server-cert.pem;  #server证书公钥
  ssl_certificate_key  /web_gantt/ca/server-key.pem;  #server私钥
  ssl_client_certificate /web_gantt/ca/ca.pem;  #根级证书公钥，用于验证各个二级client
  ssl_session_timeout 5m;
  ssl_protocols SSLv2 SSLv3 TLSv1 TLSv1.1 TLSv1.2; #按照这个协议配置
  ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE; #按照这个套件配置
  ssl_prefer_server_ciphers on;
  ssl_verify_client on;  #开启客户端证书验证
......