公网访问本地服务

在公网部署前端项目是很方便的，Vercel、Netlify、Cloudflare等等都可以很快地部署一个前端页面（前端部署是这样的，你只要上传文件就可以，而后端部署要考虑的就很多了，没有云服务器）

现在我部署了一个前端页面，我想让这个页面可以访问我本地电脑上运行的后端服务，不用云服务器怎么做？

查看IPv6地址

家里的路由器有IPv6地址，可以使用ipconfig命令查看

image-20250101000149006

创建后端项目

以springboot为例，创建一个后端项目，需要导入spring-boot-starter-web依赖

创建一个简单的测试接口，启动项目访问localhost:8080，会显示Hello World!

@RestController
@CrossOrigin // 允许跨域请求
public class TestController {
    @GetMapping
    public String test() {
        return "Hello World!";
    }
}

在application.yml文件中添加一个配置，启动IPv6功能，重启项目，访问 http://[240e:370:9114**********]:8080/,中间的一长串就是刚才获取的IPv6地址，同样会显示Hello World!

server:
  address: "::"

部署前端页面

创建一个文件夹，在文件夹下添加一个 index.html 文件，作用很简单，就是向我们刚刚创建的接口发送请求，你需要将下面的ip地址替换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        button {
            font-size: 50px;
            margin-left: 30vw;
            margin-top: 20vh;
            width: 300px;
        }
    </style>
</head>
<body>
    <button id="fetchDataBtn">获取数据</button>
    <script>
        document.getElementById('fetchDataBtn').addEventListener('click', function () {
            axios.get('http://[240e:370:9114**********]:8080/') //替换这个ip
                .then(function (response) {
                    console.log(JSON.stringify(response.data, null, 2));
                })
                .catch(function (error) {
                    console.error('Error fetching data:', error);
                });
        });
    </script>
</body>
</html>

这里使用surge进行部署这个html页面

为什么使用它？因为它可以使用http协议，本地的springboot服务器使用http，如果前端部署使用https的话，发送请求会被浏览器拦截（当然如果你有有效SSL证书也可以把本地服务器改为https，然后前端部署也使用https）

  • 安装surge

    npm install -g surge

  • 执行surge,部署网页，第一次使用需要注册，输入邮箱然后设置一个密码，随后验证邮箱

    surge

  • 之后会询问使用哪个文件夹，默认当前文件夹，直接回车

  • 然后设置一个域名，回车就完成了

测试

打开刚才设置的域名，默认会使用https，手动修改为http，点击页面上的按钮，打开控制台就能看到Hello World！了，这样在公网部署的前端项目就能访问本地的后端服务器了，而且不需要云服务器！