问题背景:前后端分离情况下后端开发测试需要配置hosts,有此问题的人员有RD,QA,PM,User

测试环境由于用户使用这种配置导致无法使用线上系统发起单据影响用户使用,同时让用户误以为系统出问题而导致增加沟通成本。

问题原理:用户访问的是线上,但是由于本地hosts影响,浏览器加载的资源是测试环境的,导致实际发出的请求是由测试环境发出的,因此用户会以为系统出现问题。

目标:在用户使用出现问题时,给予明确提示和解决方案,减少与RD和PM的沟通成本。

方案调研:

1.后端校验hosts,

问题:java目前可以做到本地hosts检测,由于后端程序是部署到服务器上的,因此无法满足各个PC端的hosts校验。PASS

  1. 前端校验hosts

问题:js,node等前端语言对文件流等处理不太友好,同时难度较大,相当于重新开发了一套hosts更新工具(网上思路,无法解决根本问题,PASS)

3.C,Python实现

网上有相应的实现思路但是需要客户端安装相应脚本工具,实现难度较大(网上思路,无法根本解决问题,PASS)

4.内网单点登录实现

inpass(内网单点登录系统)目前天生支持对应域名后缀跳转,但是对于线上环境,但是发起请求却是从测试环境发起的无法判断,因此PASS

现在我们重新来看一下问题:

用户访问的是线上,由用户本地环境问题导致系统不可用,因此可以对加载的本地环境进行检测,

由于大部分获取数据接口是采用相对路径,提交单据或者弹框单据等是绝对路径,由此我们需要拿到用户访问的线上系统域名与发起单据请求的域名进行对比,

如果都是以xxxx-inc.com结尾或者以xxxtest.cn结尾的则表示用户的环境是正确的,否则是错误的.

由上所述,我们可以知道,解决方案如下:

1.前端对发起单据或者需要绝对路径匹配的ajax请求进行域名匹配,匹配成功,则正常发起,否则弹框提示或者在控制台打log,提示用户本地环境有问题...

方案优点:

1.简单,后端不用动,前端只要简单开发就可以解决问题,代码量不超过10行。

2.上述逻辑代码不需要部署到线上即可解决问题。即使部署到线上也没有问题,错误提示只在测试环境中产生,用户只要本地环境是正确的即可通过该逻辑。

3.给用户明确提示之后可减少沟通成本,让用户体验更好。

本文由博客一文多发平台 OpenWrite 发布!
架构设计@工程设计@服务稳定性之路

前后端hosts配置访问问题解决思路的更多相关文章

  1. 使用nginx反向代理处理前后端跨域访问

    本文主要解决:使用nginx反向代理处理前后端跨域访问的问题 1.何为跨域访问? 以下类型为跨域访问 1)不同域名间访问 www.zuiyoujie.com和www.baidu.com 2)同域名不同 ...

  2. vue项目实践-前后端分离关于权限的思路

    前后端分离后权限的思路 最近看到许多关于权限的思路,但好像都是使用动态加载路由的方式,现在也分享下我在项目中使用的解决方案. 前后端分离关于权限的处理每个人都不一样,根据项目选择制定合适的方案就好 我 ...

  3. Node+Express+MongoDB + Socket.io搭建实时聊天应用实战教程(三)--前后端环境配置

    前言 之前都是介绍一些基础知识,在这一节,我们就要开始实战coding了.正所谓磨刀不误砍柴工,准备工作显得尤为重要.很多demo只是追求效果的实现,并不注重整个demo的架构性.从我个人的角度看来, ...

  4. Nginx 前后端分离配置 分发

    前端项目VUE  端口8081 , 后端项目JAVA 端口8080 # For more information on configuration, see: # * Official English ...

  5. Django2.2 Vue 前后端分离 无法访问Cookie

    个人验证后可用配置如下: 环境: - Django 2.2 - djangorestframework 3.9 - django-cors-headers 2.5.3 INSTALLED_APPS = ...

  6. SpringBoot20 集成SpringSecurity02 -> 利用SpringSecurity进行前后端分离的登录验证

    1 SpirngBoot环境搭建 创建一个SpringBoot项目即可,详情参见三少的相关博文 参考博文 -> 点击前往 SpirngBoot项目脚手架 -> 点击前往 2 引入Spirn ...

  7. 【笔记】总结Springboot和Vue前后端分离的跨域问题

    跨域一直是个很玄学的问题,SSM的时候又得前后端一起配置,sb的时候又不用. 前端 axios普通get请求 submitForm() { var v=this; this.$axios({ meth ...

  8. 前端和后端采用接口访问时的调用验证机制(基于JWT的前后端验证)(思路探讨)

    说明:基于前后端,尤其是使用Ajax请求的接口,现在市面上网页上调用的Ajax基本都是没有验证的,如果单独提取之后可以无线的刷数据. 继上一篇http://www.cnblogs.com/EasonJ ...

  9. 在k8s中部署前后端分离项目进行访问的两种配置方式

    第一种方式 (1) nginx配置中只写前端项目的/根路径配置 前端项目使用的Dockerfile文件内容 把前端项目编译后生成的dist文件夹放在nginx的html默认目录下,浏览器访问前端项目时 ...

随机推荐

  1. 在vue中使用[provide/inject]实现页面reload

    在vue中实现页面刷新有不同的方法: 如:this.$router.go(0),location.reload()等,但是或多或少会存在问题,如页面会一闪等 所以建议使用[provide/inject ...

  2. 踩坑踩坑之Flask+ uWSGI + Tensorflow的Web服务部署

    一.简介 作为算法开发人员,在算法模块完成后,拟部署Web服务以对外提供服务,从而将算法模型落地应用.本文针对首次基于Flask + uWSGI + Tensorflow + Nginx部署Web服务 ...

  3. Flutter学习笔记(29)--Flutter如何与native进行通信

    如需转载,请注明出处:Flutter学习笔记(29)--Flutter如何与native进行通信 前言:在我们开发Flutter项目的时候,难免会遇到需要调用native api或者是其他的情况,这时 ...

  4. [开源]如何使用goapp写你的后台管理系统_golang

    简析 基于 Gin + GORM + Casbin + vue-element-admin 实现的权限管理系统. 基于Casbin 实现RBAC权限管理. 前端实现: vue-element-admi ...

  5. idea tomcat提示Unable to ping server at localhost:1099

    idea启动tomcat报错Unable to ping server at localhost:1099 是 IDEA配置的jdk版本 与 tomcat的jdk版本不配导致的

  6. Web Storage和cookie的区别——每日一题20190629

    Web Storage? 使用HTML5可以在本地存储用户的浏览数据. 使用的主要目的是为了克服Cookie带来的一些限制,当数据需要被严格控制在客户端上时,无需持续的将数据发回服务器 主要目标: 1 ...

  7. 【DP合集】m-knapsack

    给出 n 个物品,第 i 个物品有重量 w i .现在有 m 个背包,第 i 个背包的限重为 c i ,求最少用几个背 包能装下所有的物品. Input 输入的第一行两个整数 n, m ( n ≤ 2 ...

  8. HashTable、Dictionary、ConcurrentDictionary三者区别

    转载自https://blog.csdn.net/yinghuolsx/article/details/72952857 1.HashTable HashTable表示键/值对的集合.在.NET Fr ...

  9. Redis Sentinel(哨兵核心机制) 初步深入

    ##### 1.Redis 的 Sentinel 系统用于管理多个 Redis 服务 该系统执行以下三个任务:  1.监控(Monitoring): Sentinel 会不断地检查你的主服务器和从服务 ...

  10. Java工程师学习指南(中级篇)

    Java工程师学习指南 中级篇 最近有很多小伙伴来问我,Java小白如何入门,如何安排学习路线,每一步应该怎么走比较好.原本我以为之前的几篇文章已经可以解决大家的问题了,其实不然,因为我写的文章都是站 ...