项目简介
前端 Vue3 + 后端 .NET6
前端使用Axios进行Http请求
问题表现
PC本机(前后端都运行在本机)可以正常访问前后端。手机连接WIFI,通过 http://192.168.0.113:8080 打不开前端页面。
换手机自带浏览器后,可以访问前端页面,但是无法获取后台数据。
解决过程
网上搜索了很多解决方案,基本都围绕跨域问题在说。但是我后端已经配置了跨域策略,确认是没有问题的。刚开始摸不着头脑,按网上的解决方法,在前端跨域、配置代理方面折腾。
后来冷静下来,拿了一台笔记本,连上WIFI,出现了与手机一样的情况。通过浏览器控制台的反馈确认了不是跨域问题,并猜想到了可能是因为 localhost 导致访问域名不匹配。
下面是解决问题的步骤。
前端修改
1. 将 VUE_APP_BASE_API = 'http://localhost:5057'
改为 VUE_APP_BASE_API = 'http://192.168.0.113:5057'
这一步改完,后端访问接口由 http://localhost:5057 变成 http://192.168.0.113:5057
2. 在Package.json文件中指定域名和端口,这里域名输入本机IP,不要用localhost。
这一步改完,前端页面的本地访问链接由 http://localhost:8080 变成 http://192.168.0.113:8080
输入 npm run serve 结果如下
(这一步不改的话本机访问后端的Session会失效,其他机器访问正常,服务器本机反而不能正常访问后端了)
后端修改
在 Program.cs 文件中添加以下代码
builder.WebHost.UseUrls("http://192.168.0.113:5057");
这样,后端访问地址由默认的 http://localhost:5057 变为 http://192.168.0.113:5057
如果配置了Swagger,还要在launchSettings.json中改一下applicationUrl,否则Swagger无效。但后端程序可以正常使用,暂时不用Swagger可以不改这个applicationUrl。
总结
这次遇到的这个问题困扰了我很久,前后花过大量时间网上搜索、查询资料,虽然也有一些收获,但与最终问题的解决完全不搭边。
问题的本质其实很简单,localhost 表示本地主机,服务器ip或域名设置成localhost,自然只能在服务器本地访问。其他机器通过192.168.0.113这样明确的 IP 可以访问到服务器的前端页面,但是由于后端域名配置为localhost,所以其他机器访问不了后端。
遇到问题不能总是照搬网上的解决方案,要结合自己的思考。同时,基础知识掌握牢固,在解决问题的时候才会更快更准。