0
点赞
收藏
分享

微信扫一扫

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


场景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的,所以只能通过内网穿透的方式让微信那边访问的到。



 


 



 



 



 

举报

相关推荐

0 条评论