uniapp 如何限制只允许 localhost 访问

在使用uniapp开发时，如何限制只允许通过localhost访问应用？我需要在开发阶段禁止其他IP访问，但找不到具体的配置方法。尝试修改manifest.json和nginx配置都没成功，请问正确的实现方式是什么？需要在前端还是服务端进行限制？

2 回复

在 manifest.json 的 h5 配置中添加：

"devServer": {
  "disableHostCheck": false,
  "allowedHosts": ["localhost"]
}

这样仅允许 localhost 访问开发服务器。


在 UniApp 中，可以通过配置网络访问白名单来限制只允许 localhost 访问。具体方法如下：

1. 配置 manifest.json 文件

在项目根目录的 manifest.json 文件中，添加或修改 networkTimeout 和 secureNetwork 配置（适用于 H5 平台）。

{
  "h5": {
    "devServer": {
      "disableHostCheck": false, // 确保启用主机检查
      "allowedHosts": ["localhost"] // 仅允许 localhost 访问
    }
  }
}

2. 使用前端逻辑限制（辅助方法）

在页面逻辑中检查访问域名，非 localhost 时进行拦截：

// 在页面 onLoad 或 App.vue 的 onLaunch 中检查
onLoad() {
  const host = window.location.hostname;
  if (host !== 'localhost' && host !== '127.0.0.1') {
    uni.showToast({
      title: '访问被拒绝',
      icon: 'none'
    });
    // 可选：跳转到错误页面或关闭应用
    setTimeout(() => {
      window.location.href = 'about:blank'; // 强制关闭页面
    }, 2000);
  }
}

3. 后端配合（如需严格限制）

  • 在服务端配置防火墙规则，仅允许 127.0.0.1 访问端口。
  • 或通过 Nginx/Apache 设置 allow 127.0.0.1; deny all;。

注意事项：

  • 前端限制仅作为辅助，实际部署时需依赖服务端配置。
  • 本地开发时，确保使用 http://localhost 访问项目。

以上方法结合使用，可有效限制仅本地访问。

回到顶部