工具JS:纯前端判断运行环境是公司内网还是公网环境

工具JS:纯前端判断运行环境是公司内网还是公网环境

判断内网方式一般就2种:

  • 后端出接口,判断请求头内ip地址,是否公司内网的ip即可
  • 前端项目内处理,利用iframe、script、img等标签支持跨域(本文介绍)
  • 如果公司有前端node项目,前端可以自己写一个接口也行(很多公司都没搭建)

逻辑:

  1. 内网环境的项目内新建一个js文件(比如:测试开发环境)
  2. 生产环境调用内网的js文件地址
  3. 动态创建js标签,调用成功执行onload,调用失败执行onerror

创建js文件:
vue、react放在public文件夹内:(内容可以为空)
创建文件:public/isIntranet.js

封装api:

// 内网查询
export const checkIntranet = () => {return new Promise((resolve, reject) => {const body = document.getElementsByTagName('body')[0];// 动态添加script标签const script = document.createElement('script');script.type = 'text/javascript';script.src = '//xxxxxx.com/isIntranet.js?_t=' + Math.random() * 1e18;body.appendChild(script);script.onload = () => {body.removeChild(script);resolve(true)};script.onerror = () => {body.removeChild(script);resolve(false)};});
}

调用:

// 引用
import { checkIntranet } from '@/api/utils';// 判断
const isInternet = await checkIntranet();
if (!isInternet) {message.warning('请使用内网或VPN访问');setTimeout(() => {this.props.history.push('/login');}, 2000)return;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/23930.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

手机如何开启开发者选项? (小米为例)

目录 问题小米开启开发者选项 待续、更新中 问题 小米开启开发者选项 设置 我的设备 手机全部参数信息 点击 miui版本 10次 提示开启开发者选项 设置中搜索:开发者 进入 开启USB调试和USB安装即可使用计算机hbuilder进行安装软件,进行调试 待续、更新中 1 顿号、: 先使用ctrl…

【日记】遇到了一个很奇怪的大爷(845 字)

正文 花了昨天和今天两天时间,把数据转移完了。这块 2T 的硬盘可以光荣退休了。目前是没什么存储焦虑了。 农发行净开发一些垃圾系统。今天没什么业务,但跟 ActiveX 斗智斗勇了一整天,最后实在搞不过 IE 浏览器。我也懒得管了,又不…

禁用layui树形表格的多选框checkbox

1. 背景 在使用树形表格渲染数据时,需要对数据进行批量操作。相对于选中数据后,再做错误提示。直接把数据的多选框禁用掉更加直观。 2. 实现 DisabledTableCheckBox: () > {// 获取所有行 var tableElem $(".layui-table-fixed-l");var …

Promise请求接口并处理返回结果,使用fetch函数

function request(url) {return new Promise((resolve, reject) > {fetch(url).then(response > {if (response.ok) {return response.json();} else {throw new Error(请求失败);}}).then(data > {resolve(data);}).catch(error > {reject(error);});}); }// 使用…

一脉阳光上市圆梦:销售成本高昂,两大创始人的行贿往事与屡屡被罚

《港湾商业观察》施子夫 2024年6月7日,江西一脉阳光集团股份有限公司(以下简称,一脉阳光)将正式在港交所主板挂牌上市(以下简称,一脉阳光;股票代码02522.HK),公司预计发…

解释单例模式、工厂模式和观察者模式的原理和应用场景

单例模式(Singleton Pattern) 原理 单例模式确保一个类仅有一个实例,并提供一个全局访问点来访问这个唯一实例。这个模式涉及到一个单一的类,该类负责创建自己的对象,同时确保只有单个对象被创建。这个类提供了一种访…

7.0 android中Service的基础知识

service的定义: Service 是一个在后台执行长时间运行操作而不提供用户界面的组件。 允许在用户没有与应用交互时操作,或者执行一些用户交互之外的操作,如音乐播放、文件上传、文件下载等。 Service的使用不影响用户的交互,且由其…

adb dump当前可见的窗口

1、窗口信息 adb shell dumpsys window windows > w.txt2、dump当前可见的窗口activity windows系统 adb shell dumpsys activity | findStr mFocusmac系统 adb shell dumpsys activity | grep mFocus3、dump当前处于栈顶的activity windows系统 adb shell dumpsys activi…

Vue3【七】setup的语法糖setup简写方法

Vue3【七】setup的语法糖setup简写方法 Vue3【七】setup的语法糖setup简写方法 使用script标签式写法称为setup语法糖 组件名称默认位文件名 export 的内容可以省略 案例截图 案例目录 案例代码 Person.vue <template><div class"person"><h1>我…

这才是计科之 Onix XV6 源码分析(1、XV6-x86的启动)

这才是计科之 Onix & XV6 源码分析&#xff08;1、XV6-x86的启动&#xff09; 前言 Onix是一款相对于XV6来说功能更为健全的单核OS&#xff0c;由于功能更加完善&#xff0c;Onix也更加复杂。代码阅读起来会比较绕。 XV6是一款简单易读的多核操作系统&#xff0c;但其功…

【JMeter接口测试工具】第一节.JMeter简介和安装【入门篇】

文章目录 前言一、JMeter简介 1.1 JMeter基本介绍 1.2 JMeter优缺点二、JMeter安装 2.1 JMeter安装步骤 2.2 JMeter环境配置三、项目介绍 3.1 项目简介 3.2 API接口清单总结 前言 一、JMeter简介 1.1 JMeter基本介绍 JMeter 是 Apache 组织使用…

js模块(module)和导入,导出(import,export)

什么是模块&#xff08;module&#xff09; 一个模块&#xff08;module&#xff09;就是一个文件。一个脚本就是一个模块。就这么简单。 模块可以相互加载&#xff0c;并可以使用特殊的指令 export 和 import 来交换功能&#xff0c;从另一个模块调用一个模块的函数或者变量…

mysql(54) : dbcp多实例使用

mysql版本: 8.0.11 java版本: 8 maven版本: 3.6.3 mave依赖 <dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.18</version></dependency><dependency><groupId&…

使用C#反射中的MAKEGENERICTYPE函数,来为泛型方法和泛型类指定(泛型的)类型

MakeGenericType 是一个在 C# 中用于创建开放类型的实例的方法。开放类型是一种未绑定类型参数的泛型类型。当你有一个泛型类型定义&#xff0c;并且想要用特定的类型实例化它时&#xff0c;你可以使用 MakeGenericType 方法。 public Type MakeGenericType (params Type[] ty…

Windows API 开发桌面应用程序,在窗口按下鼠标左键不放可以拖图,并且拖图期间鼠标图标变成手掌

在Windows API中&#xff0c;要实现鼠标左键按下并拖动以移动窗口中的某个图形&#xff0c;并且同时改变鼠标图标为“手掌”形状&#xff08;这通常指的是“拖动”或“移动”的图标&#xff09;&#xff0c;你需要执行几个步骤。 以下是一个基本的步骤指南&#xff0c;用于在W…

java---程序逻辑控制(详解)

目录 一、概述二、顺序结构三、分支结构3.1 if语句3.1.1 语法格式13.1.2 语法格式23.1.3 语法格式3 3.2 练习3.2.1 判断一个数字是奇数还是偶数3.2.2 判断一个数字是正数&#xff0c;负数&#xff0c;还是零3.2.3 判断一个年份是否为闰年 3.3.switch语句 四、循环结构4.1 while…

部署Jar包教程

文章目录 引言I 编写脚本1.1 启动1.2 关闭1.3 SSH上传jar包II 打包2.1 build中的plugins中标签的含义2.2 jar中没有主清单属性引言 I 编写脚本 1.1 启动 chmod a+x start.sh #!/bin/bash nohup java -Xms1024m -Xmx1024m -Xmn256m -XX:MaxDirectMemorySize=5G -jar SOAP-0.…

在Linux平台下使用 .NET Core技术的UI方案

在Linux平台下使用 .NET Core 实现精美的界面&#xff0c;你可以考虑以下几种方案&#xff1a; 1. 使用 Avalonia Avalonia 是一个跨平台的 .NET UI 框架&#xff0c;支持 Windows、macOS 和 Linux。它类似于 WPF&#xff0c;但能够在多个平台上运行。 安装 Avalonia 你可以…

Flutter vscode环境如何进行真机测试

目录 1. 准备工作 1.1 安装Flutter和VS Code 1.2 安装必要的VS Code扩展 1.3 手机设置 2. 配置VS Code调试环境 3. 手机如何退出开发者模式 1. 准备工作 1.1 安装Flutter和VS Code 确保你已经在电脑上安装了Flutter SDK和VS Code。如果还没有&#xff0c;可以参考以下指…

项目文章 | Nature Commun蓝藻转录因子PhoB对磷/铁的营养元素限制的调控机制

近日&#xff0c;华中师范大学邱保胜教授团队在《Nature Communications》发表题为“Phosphorus deficiency alleviates iron limitation in Synechocystis cyanobacteria through direct PhoB-mediated gene regulation”文章&#xff0c;其重点研究了Synechocystis蓝藻转录因…