webpack配置devServer配置https代理与证书

配置Webpack Dev Server HTTPS环境

最新推荐文章于 2024-07-16 10:54:40 发布

原创最新推荐文章于 2024-07-16 10:54:40 发布 · 1w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #devServer #https #cert

webpack 专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何在Webpack开发服务器中配置HTTPS环境，包括设置端口、代理规则及证书读取等步骤，确保开发过程中能顺利使用需要HTTPS权限的功能。

浏览器如果需要开发某些特定功能，需要https浏览器才会给予功能权限，则开发时我们需要在https环境
下面是配置一个webpack devServer的https环境

//webpack.config.js
module.exports = {
 ...
 devServer: {
    port: 8080,
    proxy: [{
      context: ['/api'],  //将 "https://urlname.com:8080/api" 转发到 "https://127.0.0.1:6495/api"
      target: 'https://127.0.0.1:6495',
      secure: false,
      changeOrigin: true
    }],
    host: '0.0.0.0',
    allowedHosts: [ 'urlname.com' ],
    https: {              //开启的端口可以通过https访问
      key: fs.readFileSync('./cert/urlname.com.key'),
      cert: fs.readFileSync('./ecrt/urlname.crt')
    }
  }
}