首页 > 其他分享 >关于本地开发对接前端的解决思路

关于本地开发对接前端的解决思路

时间:2023-07-13 14:32:41浏览次数:45  
标签:lidisam cn ip 前端 对接 www 本地 10.10


场景1:假设局域网启动了一个禅道(管理项目的一个后台系统),ip为10.10.119.66:8081,我当然可以直接通过10.10.119.66:8081来访问到禅道了。但是我还想让别人都用个域名www.lidisam.cn:8081来访问禅道。



解决步骤:



1 打开 C:\Windows\System32\drivers\etc\hosts,并编辑添加一行如下:



10.10.119.66 www.lidisam.cn



 



2 然后我们再网站输入"www.lidisam.cn:8081"即可跳转到禅道上了



原因分析:为什么修改了这个会生效?是DNS解析的原因,默认DNS会去13个节点的根域名访问,拿到当前域名对应真实IP地址,但是如果本地hosts设置了就会优先使用hosts设置的(比如上面所设置的)。



 



场景2:假设我现在想抓手机访问浏览器的http请求



解决步骤:



1 首先下一个fiddler,并配置(教程如:https://jingyan.baidu.com/article/03b2f78c7b6bb05ea237aed2.html)


 



2 然后我用手机访问网站的http请求就能被其抓到了



 



场景3:假设www.lidisam.cn是正式环境的一个域名,这是一个前后端分离的H5项目(SpringBoot + Vuejs),我在本地运行它的SpringBoot代码,但是我没有Vuejs代码,我想用线上的vuejs代码,然后请求的后端都会请求到我本地跑的程序上



解决步骤:



1 打开 C:\Windows\System32\drivers\etc\hosts,并编辑添加一行如下:



127.0.0.1 www.lidisam.cn



 



2 配置好”场景2“的fiddler,手机开启代理



 



3 启动本地SpringBoot项目(这里是80端口启动),给本地的SpringBoot项目打好断点



 



4 手机访问H5,随便点几下,我们就可以看到访问的请求请求到本地程序了,到断点那个位置停住了



 



场景4:假设在"场景3"做一点小改动,把SpringBoot项目启动的端口改为8080(80都是扯谈,8080这种才是正常的端口),改完之后,我还是想要请求的后端都会请求到我本地跑的程序上



解决步骤:



1 打开 C:\Windows\System32\drivers\etc\hosts,并编辑添加一行如下:



127.0.0.1 www.lidisam.cn



 



2 配置好”场景2“的fiddler,手机开启代理



 



3 启动本地SpringBoot项目(这里是8080端口启动),给本地的SpringBoot项目打好断点



 



4 到"http://nginx.org/en/download.html"下载一个nginx用于反向代理,修改nginx.conf如下,并重启



--------------nginx.conf-----------------
 
   
worker_processes  1;
 
   

     
   
 
   
events {
 
   
    worker_connections  1024;
 
   
}
 
   

     
   
 
   
http {
 
   
    include       mime.types;
 
   
    default_type  application/octet-stream;
 
   
    sendfile        on;
 
   
    keepalive_timeout  65;
 
   
    include myconf/*.conf;
 
   
server{
 
   
       listen 80;
 
   
       server_name  www.lidisam.cn;
 
   
       location ~ (^/jsp|.json$){
 
   
           proxy_pass http://localhost:8080; # 你本地程序tomcat地址
 
   
       }
 
   
    }
 
   
}
 
   
-------------------------------------------


5 手机访问H5,随便点几下,我们就可以看到访问的请求请求到本地程序了,到断点那个位置停住了



 



场景5:假设因为某种原因(也有可能是没开发环境),当前开发分支不能合并到开发环境的分支中。这时候需要前端(Vuejs)与后端(SpringBoot)在本地局域网联调,但这就会出现域不一样导致的跨域问题



前置说明:



前端使用npm run dev 启动本地的vue项目,端口是8080,假设他电脑的ip是10.10.119.60。我这边后端的ip地址是10.10.119.61,如果前端的本地直接访问我这个ip,那肯定会出现跨域问题(毕竟域名不一样)。所以下面可通过代理设置在同一个域名。



 



解决步骤:



1 前端那边(ip=10.10.119.60)打开 C:\Windows\System32\drivers\etc\hosts,并编辑添加一行如下:



127.0.0.1 www.lidisam.cn



 



2 我这边(ip=10.10.119.61)启动本地SpringBoot项目(这里是8080端口启动),给本地的SpringBoot项目打好断点



 



3 前端那边(ip=10.10.119.60)启动Vuejs项目(这里也是8080端口启动),然后我们可以配置nginx如下:



-------------------------------------------



server{
    listen 80;
    server_name www.lidisam.cn;
    default_type 'text/html';
    charset utf-8;
    # 后端
    location /xxx {
        proxy_pass http://10.10.119.61:8080/;
    }
    # 前端
    location / {
        proxy_pass http://127.0.0.1:8080;
    }
}



-------------------------------------------



上面的意思是:请求www.lidisam.cn/xxx/*路径下的所有资源,流量都会访问到我的后端(ip=10.10.119.60),并且假设访问www.lidisam.cn/xxx/detail/1,就会访问到10.10.119.60:8080/detail/1;请求到“/”路径,即第一个路径非/xxx时,就会访问到前端资源(ip=10.10.119.60:8080及其下所有非/xxx开头的路径)。为什么是这样设置?


 



4 前端(ip=10.10.119.61)那台机随便点下本地跑起来的前端,就可以看到后端运行到断点的位置了,这样就解决了跨域问题了。



 



场景6:如何用内网穿透的方式解决微信本地开发无法开发的问题



由于微信开发有不少接口,微信需要回调请求,但是因为在本地开发,微信是访问不了局域网ip的,所以只能通过内网穿透的方式让微信那边访问的到。



 


 



 



 



 

标签:lidisam,cn,ip,前端,对接,www,本地,10.10
From: https://blog.51cto.com/u_13854513/6710906

相关文章

  • 批量添加本地jar包至远程仓库
    将maven本地仓库中的jar包用脚本上传到Nexus远程maven库中如果是用的gradle管理工具,可以看我另一篇文章,先将jar包从gradle缓存中转移到maven本地库。这里使用Bash脚本可以将Maven本地库目录的所有jar,一次性导入到Nexus中。如果是在Windows环境中,可以安装Git,使用GitBas......
  • 如何实现在前端使用typescript的具体操作步骤
    在前端使用Typescript介绍Typescript是一种由微软开发的开源编程语言,它是JavaScript的超集,可以编译为纯JavaScript代码。Typescript增加了静态类型检查、面向对象编程和更好的工具支持,使得前端开发更加可靠和可维护。本文将教你如何在前端项目中使用Typescript。步骤下......
  • maven 本地库添加jar包
    mvninstall:install-file-Dfile="jar包的绝对路径"-Dpackaging="文件打包方式"-DgroupId=groupid名-DartifactId=artifactId名-Dversion=jar版本例子:mvninstall:install-file-Dfile=C:\project\xlkj_api\WebRoot\WEB-INF\lib\UserAgentUtils-1.21.jar-D......
  • springboot 自定义整合caffeine 本地缓存
    1、自定义缓存配置类@Data@ConfigurationProperties(prefix="page.cache")publicclassPageCacheProperties{privateCaffeineConfigPropertiescaffeine=newCaffeineConfigProperties();//本地缓存配置privatePageCacheAsyncExecutorConfigpool=newP......
  • Nginx 常用的基础配置(web前端相关方面)
    基础配置userroot;worker_processes1;events{worker_connections10240;}http{log_format'$remote_addr-$remote_user[$time_local]''"$request"$status$bod......
  • 盘点前端实现文件下载的几种方式
    前端涉及到的文件下载还是很多应用场景的,那么前端文件下载有多少种方式呢?每种方式有什么优缺点呢?下面就来一一介绍。1.使用a标签下载通过a标签的download属性来实现文件下载,这种方式是最简单的,也是我们比较常用的方式,先来看示例代码:<a href="http://www.baidu.com" downl......
  • GPT生产前端代码
    我让GPT生成一段前端代码:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><linkhref="https://cdn.quilljs.com/1.3.6/quill.snow.css"rel="......
  • 脱发秘籍:前端Chrome调试技巧汇总
    Chrome浏览器调试工具的核心功能:......
  • 记录--盘点前端实现文件下载的几种方式
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前端涉及到的文件下载还是很多应用场景的,那么前端文件下载有多少种方式呢?每种方式有什么优缺点呢?下面就来一一介绍。1.使用a标签下载通过a标签的download属性来实现文件下载,这种方式是最简单的,也是我们比较常用......
  • 前端Get请求传递时间参数报错
    Get请求时,传递的参数都属于字符串类型,若是这个时候后端是用Date类型接收,会出现数据类型不匹配的问题(@DateTimeFormat(pattern="yyyy-MM-dd")注解可自动将前端传来的字符串转换成时间类型,不过前端传来的长度要大于pattern设置的格式~)@DateTimeFormat(pattern="yyyy-MM-dd")......