【AI】✈️问答页面搭建-内网穿透公网可访问!

server/2024/12/25 21:29:18/

目录

👋前言

👀一、后端改动 

🌱二、内网穿透

💞️三、前端改动

🍹四、测试

📫五、章末


👋前言

        小伙伴们大家好,上次本地搭建了一个简单的 ai 页面,实现流式输出问答内容,文章链接如下:

        【AI】⭐️搭建一个简单的个人问答网页-CSDN博客

        这次就接着上次的页面做点调整,因为之前的项目是基于本地启动的项目,也只限本地访问,想要在公网访问到我们自己搭建的项目还要借助内网穿透,或者说将我们的服务部署到远程服务器上,相比于后者,小荷包不支持,但是内网穿透工具,网上还是很多的(也可以参考之前的文章,有提及别的作者推荐比较好用的,链接如下)!

【服务器搭建】✈️用自己电脑搭建一个服务器!_服务器怎么搭建-CSDN博客

👀一、后端改动 

        为了避免跨域的问题,这里先提前加一个配置,不做限制

        @Configuration 注解表明是一个配置类, spring 启动时会自动扫描并且注入, 实现 WebMvcConfigurer 接口,重写跨域方法(该接口的功能还有很多,可以详细了解下)

java">/*** @author HuangBenben */
@Configuration
public class CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {// 配置全局跨域规则registry.addMapping("/**")  // 允许所有路径.allowedOrigins("*")  // 允许所有来源.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 允许的 HTTP 方法.allowedHeaders("*")  // 允许所有请求头.allowCredentials(false)  // 是否允许发送 Cookie.maxAge(3600);  // 预检请求缓存时间(秒)}}

🌱二、内网穿透

        2.1 工具选择

        大家可以自行搜索,本地只是临时穿透下,所以选择的极点云,有免费的可以使用

价格 - cpolar 极点云官网

        使用的话直接注册,下载后桌面会有这个快捷方式,双击快捷跳转网页管理端页面,输入账号登录之后

        2.2 登录到管理页面之后,选择创建隧道,如下,端口号就是后端项目启动使用的端口号,创建成功后,可以在隧道列表中查看映射后的公网地址,这个地址复制下来(会有两个,仔细看的话分别是 http 和 https 的,地址其实一样,复制地址要用)

💞️三、前端改动

        做好映射后,前端页面之前的接口设置的是 localhost:8888,现在需要替换成映射后的地址,因为不替换掉的话,即使公网可以访问页面,但是接口是调用不通的,因为会请求访问设备本地的8888端口,改动如下(前端原先完整的代码可以看文章开头提及的文章)

🍹四、测试

         直接手机访问穿透后的地址,如下:可以正常访问并且数据也都显示出来了

http://45cb0925.r7.cpolar.top

        也可以在这基础上,统计下打进来的请求都是属于哪些 ip ,可以创建个表单独统计,统计的地方可以放到接口方法中,进来之后处理完问题,手动插入一条数据,或者使用 aop 切面,请求该方法前记录下都可以,大致如下:

📫五、章末

        到这里也只是做了内网穿透,方便公网访问,针对页面还有很多要调整,比如目前只能显示一条,刷新页面后数据会丢失等问题,后面有时间再做更新。

        文章到这里就结束了~


http://www.ppmy.cn/server/152854.html

相关文章

c++--------------------------------接口实现

引用参数 引用的基本概念 在C中,引用是一个别名,它为已存在的变量提供了另一个名字。引用的声明格式为类型& 引用名 变量名;。例如,int num 10; int& ref num;,这里ref就是num的引用,对ref的操作等价于对nu…

C# 文件系统I/O操作--File类与FileInfo类

File和FileInfo两个功能基本相同,他们都是基于System.IO命名空间的文件操作类。File 和 FileInfo 都是 .NET 基于System.IO命名空间中用于处理文件的类,但它们的设计理念和使用方式有所不同: File是静态类,它不属于特定对象&…

Mac系统下 idea中如何创建maven项目

首先点击顶部的File,然后将鼠标移至New,会显示Project,点击Project,如下图所示。 然后选择Empty Project,填写项目名称,选择项目存放地址,点击Create,完成空项目的创建,…

CSS的样式计算过程

先看一段代码&#xff0c; a标签是什么颜色&#xff1f; <html><head><title>CSS</title><style>.wrapper {color: red;}</style></head><body><div class"wrapper"><a href"#">我是一个a标…

【漏洞-Oracle】未设置口令复杂度校验、密码有效期

1.场景描述 三方漏洞扫描&#xff1a; 2.详细描述 安全问题&#xff1a;Oracle未设置系统的口令复杂度校验、密码有效期。 危害分析结果&#xff1a;存在使用口令被恶意用户猜测获得&#xff0c;合法用户身份被仿冒&#xff0c;导致系统被非授权访问的可能性。 整改建议&…

41.在Vue3中使用OpenLayers实现读取WKT数据,输出GML、Polyline、GeoJSON

引言 随着地理信息系统&#xff08;GIS&#xff09;应用的不断发展&#xff0c;Web地图和地理数据的处理已经成为许多前端开发者的重要任务之一。在Vue 3框架中结合OpenLayers进行地理数据的可视化展示是一种常见的解决方案。OpenLayers是一个开源的Web地图API&#xff0c;支持…

在Visual Studio 2022中配置C++计算机视觉库Opencv

本文主要介绍下载OpenCV库以及在Visual Studio 2022中配置、编译C计算机视觉库OpenCv的方法 1.Opencv库安装 ​ 首先&#xff0c;我们需要安装OpenCV库&#xff0c;作为一个开源库&#xff0c;我们可以直接在其官网下载Releases - OpenCV&#xff0c;如果官网下载过慢&#x…

Python 标准库:string——字符串操作

文章目录 模块介绍主要常量主要类- Formatter- Template 主要函数- capwords()- Template.substitute()- Formatter.format() 模块介绍 string 模块提供了许多与字符串操作相关的常量和函数。它主要用于处理字符串&#xff0c;包括字符集合、格式化操作和其他与字符串相关的功…