前端文件在虚拟机,后端在本机,两个如何通信

前端文件在虚拟机,后端在本机,两个如何通信

如果前端的文件放在虚拟机里面,但是调用接口的后端在本地调试,如何做到在虚拟机中也能访问到本地的接口内容。

其实这个问题很简单,只要讲本地的IP和虚拟机中的IP结合就可以了。

本篇文章只要将虚拟机中的IP网段和本机的保持一致即可,桥接方式和NAT道理一样。

虚拟机的配置

我这里以VMware为例,在虚拟机中需要将本地的IP改为桥接模式,或者和虚拟机中的IP对应也行,看哪种方案适合你吧。

我就先将虚拟机中连接类型改为桥接模式

点击编辑虚拟机设置。

选择桥接模式,之后确定。

将这个系统启动;查看这个虚拟机中的IP地址,输入ifconfig,这个就是我们需要找的IP地址

查看本机IP地址

找到虚拟机的地址后,再找自己的IP地址,在Windows控制台中输入ipconfig,我本机IP地址是192.168.31.35

修改NGINX配置文件

如果你在虚拟机中使用的nginx,需要在配置文件中将你后端接口地址放进去,找到nginx.conf文件,将后端代理地址localhost改为192.168.31.35地址。

一定要分清哪个是虚拟机的IP地址哪个是本机的IP地址。

NGINX中的代理,如果你的后端是在本地,那么后端接口就填本机的IP地址:端口!!!!!!

虚拟机中将前端文件拖入,放在NGINX的html目录下,这个和配置NGINX环境是一样的道理!!!!!!

之后要是想访问前端文件直接访问虚拟机IP地址:端口号,如果是80端口直接在浏览器输入虚拟机IP地址即可。

前提:虚拟机网段要和本机的网段保持一致,否则没发通信的。

虚拟机中的端口号不要冲突!!!如果选择了80端口一定要保证虚拟机中没有使用过80端口,否则要么将80端口停掉,要么修改配置文件中端口,修改好了之后重启NGINX!!!

将本机和虚拟机IP关联

之后使用这个地址我的是192.168.31.202连接到控制台,将前端文件拖进去,或者直接就将文件拖入到虚拟机中也可以。

如果是一些学习项目直接在这里改就好了。

将项目启动。

之后就可以看到了。

相关推荐
草履虫建模8 小时前
力扣算法 1768. 交替合并字符串
java·开发语言·算法·leetcode·职场和发展·idea·基础
华玥作者10 小时前
[特殊字符] VitePress 对接 Algolia AI 问答(DocSearch + AI Search)完整实战(下)
前端·人工智能·ai
Mr Xu_11 小时前
告别冗长 switch-case:Vue 项目中基于映射表的优雅路由数据匹配方案
前端·javascript·vue.js
qq_2975746711 小时前
【实战教程】SpringBoot 实现多文件批量下载并打包为 ZIP 压缩包
java·spring boot·后端
老毛肚11 小时前
MyBatis插件原理及Spring集成
java·spring·mybatis
前端摸鱼匠11 小时前
Vue 3 的toRefs保持响应性:讲解toRefs在解构响应式对象时的作用
前端·javascript·vue.js·前端框架·ecmascript
学嵌入式的小杨同学11 小时前
【Linux 封神之路】信号编程全解析:从信号基础到 MP3 播放器实战(含核心 API 与避坑指南)
java·linux·c语言·开发语言·vscode·vim·ux
lang2015092811 小时前
JSR-340 :高性能Web开发新标准
java·前端·servlet
Re.不晚11 小时前
Java入门17——异常
java·开发语言
缘空如是11 小时前
基础工具包之JSON 工厂类
java·json·json切换