内网vue项目，改为https协议请求-Toy模板网

这篇具有很好参考价值的文章主要介绍了内网vue项目，改为https协议请求。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

背景：vue项目需通过navigator.mediaDevices来获取摄像头，但由于浏览器的安全策略导致navigator获取不到mediaDevices实例，目前经尝试，只有以下几种情况navigator.mediaDevices能正常使用：

① 地址为localhost:// 访问时

② 地址为https:// 时

③ 为文件访问file:/

显然，方式②更为可取，http协议改为https协议，流程入下：

① 首先，我采用的vue版本如下：

vue项目升级https,vue.js,https,前端,Powered by 金山文档

修改build目录下的webpack.dev.conf.js文件，在devServer中添加http: true

devServer: {
  clientLogLevel: 'warning',
  historyApiFallback: {
    rewrites: [
      { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
    ],
  },
  hot: true,
  contentBase: false, // since we use CopyWebpackPlugin.
  compress: true,
  host: HOST || config.dev.host,
  port: PORT || config.dev.port,
  open: config.dev.autoOpenBrowser,
  overlay: config.dev.errorOverlay
    ? { warnings: false, errors: true }
    : false,
  publicPath: config.dev.assetsPublicPath,
  proxy: config.dev.proxyTable,
  quiet: true, // necessary for FriendlyErrorsPlugin
  watchOptions: {
    poll: config.dev.poll,
  },
  https: true
},

在index.html文件中添加

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

nginx配置SSL证书（可在nginx安装目录下的conf文件下新建SSL文件夹）

① 第一步，创建服务器私钥：

openssl genrsa -des3 -out server.key 2048

② 第二步，创建CSR证书请求文件：

req -new -key server.key -out server.csr

（会要求填一些信息，其中Country Name可以填CN，其他可填可不填）

③ 第三步，备份有秘密的私钥文件：

copy server.key server.key.orig

④ 第四步，去掉私钥文件的密码：

openssl rsa -in server.key -out server.key

⑤ 第五步，使用服务器私钥签署服务器公钥证书：

openssl x509 -req -days 3650 -in server.csr -signkey server.key -out server.crt

命令完成后，将会看到SSL文件下有如下文件

部署自签证书到nginx服务器,即在文件nginx.conf文件末尾追加https服务器配置

server {
  listen       53000 ssl;
  server_name  localhost;
 
  ssl_certificate      ssl/server.crt;
  ssl_certificate_key  ssl/server.key;
 
   ssl_protocols    TLSv1 TLSv1.1 TLSv1.2;
   ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
   ssl_prefer_server_ciphers on;
   ssl_session_cache  shared:SSL:10m;
   ssl_session_timeout 10m;
		
   location / {
      root   html53000;
      index  index.html index.htm;
      try_files $uri $uri/ /index.html;
    }      
}

⑦重启nginx，然后在浏览器输入https://192.168.1.244:53000看效果