2024-12-05 vue本地测试环境安全访问

vue.config.js 中写：

module.exports = {
  publicPath,
  assetsDir,
  outputDir,
  lintOnSave: false,
  devServer: {
    hot: true,
    port: devPort,
    open: true,
    noInfo: false,
    overlay: {
      warnings: true,
      errors: true,
    },
    before: (app, server, compiler) => {
      // 这里可以添加自定义的 IP 白名单中间件
      app.use((req, res, next) => {
        // 获取客户端 IP 地址
        let clientIp = req.ip || req.connection.remoteAddress
        console.log('d', clientIp)
        // 检查是否有代理设置
        const forwarded = req.headers['x-forwarded-for']
        if (forwarded) {
          const forwardedIps = forwarded.split(',')
          clientIp = forwardedIps[0]
        }

        // 定义允许访问的白名单 IP 地址
        const whitelist = ['127.0.0.1']

        // 判断客户端 IP 是否在白名单中
        if (whitelist.includes(clientIp) || clientIp.startsWith('172.18') || clientIp.startsWith('122.228.187')) {
          next()  // 如果在白名单中，继续请求
        } else {
          res.status(403).send('Forbidden' + clientIp)  // 如果不在白名单中，拒绝访问
        }
      })
    }
  },
  productionSourceMap: false,
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: "./src/assets/css/color.less"
    }
  },
}