【AI】✈️问答页面搭建-内网穿透公网可访问！
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvMzkwNmVmYmNlZmY2NGY3NjlhNWI4ZTA0MzQzMjA3NjUud2VicA==目次
👋媒介
👀一、后端改动
🌱二、内网穿透
💞️三、前端改动
🍹四、测试
📫五、章末
👋媒介
小同伴们各人好，前次当地搭建了一个简单的 ai 页面，实现流式输出问答内容，文章链接如下：
【AI】⭐️搭建一个简单的个人问答网页-CSDN博客
这次就接着前次的页面做点调解，由于之前的项目是基于当地启动的项目，也只限当地访问，想要在公网访问到我们自己搭建的项目还要借助内网穿透，大概说将我们的服务摆设到长途服务器上，相比于后者，小荷包不支持，但是内网穿透工具，网上照旧很多的（也可以参考之前的文章，有提及别的作者保举比力好用的，链接如下）！
【服务器搭建】✈️用自己电脑搭建一个服务器！_服务器怎么搭建-CSDN博客
👀一、后端改动
为了克制跨域的题目，这里先提前加一个设置，不做限定
@Configuration 注解表明是一个设置类， spring 启动时会主动扫描而且注入， 实现 WebMvcConfigurer 接口，重写跨域方法（该接口的功能另有很多，可以详细相识下）
/**
* @author HuangBenben
*/
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
// 配置全局跨域规则
registry.addMapping("/**")// 允许所有路径
.allowedOrigins("*")// 允许所有来源
.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 允许的 HTTP 方法
.allowedHeaders("*")// 允许所有请求头
.allowCredentials(false)// 是否允许发送 Cookie
.maxAge(3600);// 预检请求缓存时间（秒）
}
} 🌱二、内网穿透
2.1 工具选择
各人可以自行搜索，当地只是暂时穿透下，以是选择的极点云，有免费的可以使用
代价 - cpolar 极点云官网
使用的话直接注册，下载后桌面会有这个快捷方式，双击快捷跳转网页管理端页面，输入账号登录之后
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvZWI5ZmE2M2QwZDQyNDQ4ZjliMjM3MWM5M2FjMTM3NDMucG5n
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvZjNmNTYyZTMyMmE5NDU5M2JiMjhhMjZhNzIwOWRmZTIucG5n
2.2 登录到管理页面之后，选择创建隧道，如下，端标语就是后端项目启动使用的端标语，创建乐成后，可以在隧道列表中查察映射后的公网所在，这个所在复制下来（会有两个，细致看的话分别是 http 和 https 的，所在着实一样，复制所在要用）
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvNWYwY2E3N2VhYTgwNDVjODg2MzcxMTY0ZmZlMmIyZTkucG5n
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvZGJmNjZjYjRhYmU4NDU0YmE5NzE5ZDZiYzQzM2YxOTUucG5n
💞️三、前端改动
做好映射后，前端页面之前的接口设置的是 localhost:8888,如今必要更换成映射后的所在，由于不更换掉的话，纵然公网可以访问页面，但是接口是调用不通的，由于会哀求访问装备当地的8888端口，改动如下（前端原先完备的代码可以看文章开头提及的文章）
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvYWNhYWEwYzY4M2UwNGU2N2I1YmQ3MzUzOTAzMjk3YTcucG5n
🍹四、测试
直接办机访问穿透后的所在，如下：可以正常访问而且数据也都体现出来了
http://45cb0925.r7.cpolar.top
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvZThkNmYwZGY0YWIyNGRkOThhMWFlYWE1NjRhMjk3ODEuanBlZw==
也可以在这根本上，统计下打进来的哀求都是属于哪些 ip ,可以创建个表单独统计，统计的地方可以放到接口方法中，进来之后处理处罚完题目，手动插入一条数据，大概使用 aop 切面，哀求该方法前纪录下都可以，大抵如下：
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvZTYxMTVhMGU3NjI4NDVmYWI0M2RmZDY1MzhhZjliMmIucG5n
📫五、章末
到这里也只是做了内网穿透，方便公网访问，针对页面另有很多要调解，比如现在只能体现一条，革新页面后数据会丢失等题目，背面偶尔间再做更新。
文章到这里就竣事了~
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvZWRhZjk3Mzk2NTExNDg4YzhhODEyNGNhN2ExZjVhMDYucG5n
页:
[1]