目录

👋前言

👀一、后端改动 

🌱二、内网穿透

💞️三、前端改动

🍹四、测试

📫五、章末

---

👋前言

        小伙伴们大家好，上次本地搭建了一个简单的 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 极点云官网

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

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

💞️三、前端改动

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

🍹四、测试

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

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

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

📫五、章末

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

        文章到这里就结束了~