使用Axios向Fastify后端发送请求报Network Error如何解决

• 修正Fastify监听配置
  Fastify默认仅绑定127.0.0.1，仅支持本机访问，需修改启动参数绑定所有网卡：

  // 原错误写法默认仅监听127.0.0.1
  // fastify.listen(3000)
  // 修正后写法
  fastify.listen({ port: 3000, host: '0.0.0.0' }, (err) => {
    if (err) throw err
  })
  

• 调整前端请求地址
  不要在移动端环境使用localhost/127.0.0.1访问宿主机服务：
  • Android模拟器：替换为10.0.2.2（Android官方预留的宿主机映射地址）
  • 同局域网真机：替换为宿主机的局域网IP（如192.168.3.45）
  • iOS模拟器：可保留localhost，真机同样使用宿主机局域网IP
• 解除Android明文流量限制
  若你使用HTTP协议请求，Android 9及以上默认禁止明文HTTP请求，需修改android/app/src/main/AndroidManifest.xml，在<application>标签添加属性：

  android:usesCleartextTraffic="true"
  

• 确认CORS配置生效
  仅安装@fastify/cors插件不会自动生效，需显式注册并配置：

  await fastify.register(require('@fastify/cors'), {
    origin: true, // 开发环境可临时允许所有来源，生产环境替换为实际业务域名
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS']
  })
  

• 连通性预校验
  先在移动端设备的系统浏览器内直接输入接口地址，确认可以正常返回响应后再调试Axios请求，排除网络层连通问题。
• 防火墙与端口校验
  确认宿主机防火墙已开放Fastify服务对应的端口，或临时关闭防火墙测试请求是否正常。

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