Vue-cli在Android端无法调用本地Node(Express)服务器接口求助

核心原因 #

Android设备上的localhost指向的是设备自身，而你的Node服务运行在开发电脑上，所以前端发起的请求根本找不到后端服务，才会出现连接拒绝的错误。

具体修复操作： #

• 修改Axios的baseURL
  把Axios配置里的localhost替换成开发电脑的局域网IP地址，比如你的电脑IP是192.168.1.100，就改成：

  const http = axios.create({
    baseURL: 'http://192.168.1.100:3001', // 替换成你的电脑实际局域网IP
    withCredentials: true
  });
  

  注意：如果本地没配置HTTPS证书，别用https协议，直接用http，否则Android会因为不信任自签名证书报错。

• 同步更新Express的CORS配置
  把cors的origin值改成前端在Android上的访问地址（电脑IP+8080端口），和Axios的IP保持一致：

  const corsOptions = {
    origin: 'http://192.168.1.100:8080', // 与前端baseURL的IP匹配
    credentials: true,
  };
  app.use(cors(corsOptions));
  

• 确保网络和端口正常

  1. 电脑和Android设备必须连接同一个WiFi局域网
  2. 关闭电脑的防火墙，或者手动设置允许3001、8080端口的入站请求
  3. 可以先在Android浏览器里直接访问http://你的电脑IP:3001/某个接口，确认后端服务能正常访问

额外提醒 #

如果项目强制使用HTTPS，需要给Android设备安装对应的自签名证书，否则设备会拒绝建立连接。本地调试阶段建议先改用HTTP，确认功能正常后再配置HTTPS证书。

内容的提问来源于stack exchange，提问作者GhostOrder