新手问题笔记：手机可以访问前端页面，但是无法获取后台数据；localhost引起后端访问路径错误，不是跨域问题

项目简介

前端 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，所以其他机器访问不了后端。

遇到问题不能总是照搬网上的解决方案，要结合自己的思考。同时，基础知识掌握牢固，在解决问题的时候才会更快更准。