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

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

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

其实这个问题很简单,只要讲本地的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连接到控制台,将前端文件拖进去,或者直接就将文件拖入到虚拟机中也可以。

在这里插入图片描述

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

在这里插入图片描述

将项目启动。

在这里插入图片描述

之后就可以看到了。

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

[SWPUCTF 2021 新生赛]finalrce

[SWPUCTF 2021 新生赛]finalrce wp 注&#xff1a;本文参考了 NSSCTF Leaderchen 师傅的题解&#xff0c;并修补了其中些许不足。 此外&#xff0c;参考了 命令执行(RCE)面对各种过滤&#xff0c;骚姿势绕过总结 题目代码&#xff1a; <?php highlight_file(__FILE__); …

Spring Boot笔记1

1. SpringBoot简介 1.1. 原有Spring优缺点分析 1.1.1. Spring的优点分析 Spring是Java企业版&#xff08;Java Enterprise Edition&#xff0c;javeEE&#xff09;的轻量级代替品。无需开发重量级的Enterprise JavaBean&#xff08;EJB&#xff09;&#xff0c;Spring为企业…

C++ 内联函数inline

内联函数是C为提高程序运行速度所做的一项改进。常规函数和内联函数之间的主要区别不在于编写方式&#xff0c;面在于C编译器如何将它们组合到程序中。要了解内联函数与常规函数之间的区别&#xff0c;必须深入到程序内部。 编译过程的最终产品是可执行程序一一由一组机器语言指…

C++ 文件操作篇

C 文件操作篇 文章目录 C 文件操作篇1 简介1.1 继承关系1.2 流1.3 缓冲区输入输出流中的缓冲streambuf 2 文件操作步骤2.1 头文件2.2 创建流对象2.3 打开文件2.4 读取数据第一种&#xff1a;**按元素直接读**第二种&#xff1a;**使用getline按行读**第三种&#xff1a;**使用*…

数据结构--查找

目录 1. 查找的基本概念 2. 线性表的查找 3. 树表的查找 3.1 二叉排序树 3.1.1 定义: 3.1.2 存储结构&#xff1a; 3.1.3 二叉排序树的查找 3.1.4 二叉排序树的插入 3.1.5 二叉排序树删除 3.2 平衡二叉树&#xff08;AVL 3.2.1 为什么要有平衡二叉树 3.2.2 定义 3.3 B-树 3.3.1…

如何安装T4显卡的驱动

文章目录 一、没有驱动的报错现象二、cuda版本与驱动的版本对应关系三、安装驱动方法1&#xff1a;方法2&#xff1a; 一、没有驱动的报错现象 ERROR: Unable to find the kernel source tree for the currently running kernel. Please make sure you have installed the ker…

uniapp-android原生插件如何打aar包 (避坑指南二)

1.打开android studio项目&#xff0c;找到module项目&#xff0c;打开右侧gradle&#xff0c;找到对应的module, 点击assemble&#xff0c;会打包生成aar&#xff0c;生成的aar在 [module]/build/outputs/aar/目录下 特殊情况&#xff0c;如果右侧的gradle&#xff0c;找到mo…

生存分析序章2——生存分析之Python篇:lifelines库入门

目录 写在开头1. 介绍 lifelines 库1.1 lifelines库简介1.2 安装与环境配置 2. 数据准备2.1 数据格式与结构2.2 处理缺失数据2.3 对异常值的处理 3. Kaplan-Meier 曲线3.1 使用 lifelines 绘制生存曲线3.2 曲线解读3.3 额外补充 4. Cox 比例风险模型4.1 lifelines 中的 Cox 模型…

RabbitMq知识概述

本文来说下RabbitMq相关的知识与概念 文章目录 概述AMQP协议Exchange 消息如何保证100&#xff05;投递什么是生产端的可靠性投递可靠性投递保障方案 消息幂等性高并发的情况下如何避免消息重复消费confirm 确认消息、Return返回消息如何实现confirm确认消息return消息机制 消费…

Flask 与微信小程序对接

Flask 与微信小程序的对接 在 web/controllers/api中增建py文件&#xff0c;主要是给微信小程序使用的。 web/controllers/init.py # -*- coding: utf-8 -*- from flask import Blueprint route_api Blueprint( api_page,__name__ )route_api.route("/") def ind…

数据的价值:隐藏在数字背后的巨大财富

在当今数字化的时代&#xff0c;数据已经成为了一种宝贵的资源&#xff0c;它的价值被越来越多的人所认识。数据不仅可以帮助企业更好地了解市场和消费者&#xff0c;提高决策的准确性&#xff0c;还可以为社会带来更多的便利和创新。企业、组织和个人可以利用数据来更好地了解…

编程笔记 html5cssjs 004 我的第一个页面

编程笔记 html5&css&js 004 我的第一个页面 一、基本结构二、HTML标签三、HTML元素四、HTML属性五、编写第一个网页六、使用VSCODE小结 开始编写网页&#xff0c;并且使用第一个网页成为一个母板&#xff0c;用于完成后续内容的学习。有一个基本要求&#xff0c;显示结…

linux cat命令增加-f显示文件名功能

在使用cat命令配合grep批量搜索文件内容时&#xff0c;我仅仅能知道是否搜索到&#xff0c;不知道是在哪个文件里找到的。比如cat ./src/*.c | grep full_write,在src目录下的所有.c文件里找full_write,能匹配到所有的full_write&#xff0c;但是不知道它们分别在哪些文件里。于…

Spring Boot+RocketMQ 实现多实例分布式环境下的事件驱动

为什么要使用MQ&#xff1f; 在Spring Boot Event这篇文章中已经通过Guava或者SpringBoot自身的Listener实现了事件驱动&#xff0c;已经做到了对业务的解耦。为什么还要用到MQ来进行业务解耦呢&#xff1f; 首先无论是通过Guava还是Spring Boot自身提供的监听注解来实现的事…

【动画视频生成】

转自&#xff1a;机器之心 动画视频生成这几天火了&#xff0c;这次 NUS、字节的新框架不仅效果自然流畅&#xff0c;还在视频保真度方面比其他方法强了一大截。 最近&#xff0c;阿里研究团队构建了一种名为 Animate Anyone 的方法&#xff0c;只需要一张人物照片&#xff0…

观察者模式概述

观察者模式,它用于建立一种对象与对象之间的依赖关系&#xff0c; 一个对象发生改变将自动通知其他对象&#xff0c; 其他对象将相应做出反应。在观察者模式种&#xff0c;发生改变的对象称为观察目标&#xff0c; 而被通知的对象称为观察者&#xff0c;一个观察目标可以对应多…

【SD】IP-Adapter 进阶 - 画风融合【3】

生成图片大小&#xff1a;1024x576 将图片一的画风转到图片2中。 测试一&#xff1a; control-1:IP-Adapter 导入图片1 仅调整大小&#xff08;拉伸&#xff09; control-2:canny 导入图片2 仅调整大小&#xff08;拉伸&#xff09; best qualit…

FPGA高端项目:SDI 视频+音频编解码,提供工程源码和技术支持

目录 1、前言免责声明 2、相关方案推荐我这里已有的 GT 高速接口解决方案我目前已有的SDI编解码方案 3、设计思路和框架设计框图GV8601A均衡EQGTX 时钟要求GTX 调用与控制SMPTE SD/HD/3G-SDISMPTE SD/HD/3G-SDI 接收SMPTE SD/HD/3G-SDI 发送 SDI 视频接收数据处理SDI 音频接收-…

Mysql实时数据同步工具Alibaba Canal 使用

目录 Mysql实时数据同步工具Alibaba Canal 使用Canal是什么&#xff1f;工作原理重要版本更新说明 环境准备安装Canalwindow Java : Canal Client 集成依赖编码 工作流程其他学习canal资料 个人主页: 【⭐️个人主页】 需要您的【&#x1f496; 点赞关注】支持 &#x1f4af; M…

2024美赛数学建模思路A题B题C题D题E题F题思路汇总 选题分析

文章目录 1 赛题思路2 美赛比赛日期和时间3 赛题类型4 美赛常见数模问题5 建模资料 1 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 2 美赛比赛日期和时间 比赛开始时间&#xff1a;北京时间2024年2月2日&#xff08;周五&#xff…