Spring Boot与Flutter集成问题：物理设备无法获取API数据

我用Spring Boot搭建好API后，尝试将数据接入Flutter应用，跟着YouTube视频学习但仍有部分内容没搞懂，无法完成必要修改。目前用物理设备调试，应用一直显示圆形进度条，控制台也没打印预期的response.body，恳请帮忙解决。

相关代码文件 #

home_screen.dart #

import 'package:flutter/src/foundation/key.dart';
import 'package:flutter/src/widgets/framework.dart';

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:to_do_spring_integration/services/db_services.dart';

import '../models/task.dart';
import '../models/tasks_data.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {

  List<Task>? tasks;

  getTasks() async {
    tasks = await Db_services.getTasks();
    Provider.of<TasksData>(context, listen: false).tasks = tasks!;

    setState(() {
      
    });
  }

  @override
  void initState() {
    super.initState();

    getTasks();
  }

  @override
  Widget build(BuildContext context) {
    return tasks == null
    ?
    const Scaffold(
      body: Center (
        child: CircularProgressIndicator(),
      )
    )
    :
    Scaffold(
      appBar: AppBar(
        title: Text(
          'Todo Tasks (${Provider.of<TasksData>(context).tasks.length})',
        ),
        centerTitle: true,
        backgroundColor: Colors.green,
      ),
    );
  }
}

db_services.dart #

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:to_do_spring_integration/models/task.dart';
import 'package:to_do_spring_integration/services/globals.dart';

class Db_services {
  
  static Future<Task> addTask(String title) async {
    Map data = {
      "title": title,
    };

    var body = json.encode(data);
    var url = Uri.parse(baseURL + '/addDetails');

    http.Response response = await http.post(
      url, 
      headers: headers, 
      body: body,
    );

    // print(response.body);
    debugPrint(response.body);
    Map responseMap = jsonDecode(response.body);

    Task task = Task.fromMap(responseMap);

    return task;
  }

  static Future<List<Task>> getTasks() async {
    var url = Uri.parse(baseURL);

    http.Response response = await http.get(
      url, 
      headers: headers,
    );

    print(response.body);
    List responseList = jsonDecode(response.body);

    List<Task> tasks = [];

    for (Map taskMap in responseList) {
      Task task = Task.fromMap(taskMap);
      tasks.add(task);
    }

    return tasks;
  }

}

tasks_data.dart #

import 'package:flutter/cupertino.dart';
import 'package:to_do_spring_integration/models/task.dart';
import 'package:to_do_spring_integration/services/db_services.dart';

class TasksData extends ChangeNotifier {

  List<Task> tasks = [];

  void addTask(String taskTitle) async {
    Task task = await Db_services.addTask(taskTitle);
    tasks.add(task);
    notifyListeners();
  }

  void updateTask(Task task) {
    task.toggle();
    // Db_services.updateTask(task.id);
    notifyListeners();
  }

  void deleteTask(Task task) {
    tasks.remove(task);
    // Db_services.deleteTask(task.id);
    notifyListeners();
  }

}

globals.dart（核心困惑点） #

const String baseURL = "https://10.0.2.2:8080";
const Map<String, String> headers = {"Content-Type": "application/json"};

核心困惑与问题 #

• 不清楚10.0.2.2的由来，当前使用物理设备而非模拟器调试
• 应用始终显示圆形进度条，控制台未打印response.body，说明API请求未成功

解决方案 #

1. 理解10.0.2.2的作用 #

10.0.2.2是Android模拟器专属IP，用来映射宿主机（电脑）的127.0.0.1（本地回环地址），仅能在模拟器环境下使用，物理设备无法通过该IP访问电脑上的Spring Boot服务。

2. 替换baseURL为局域网IP #

要让物理设备访问电脑上的Spring Boot服务，需按以下步骤操作：

• 确保电脑与物理设备连接同一Wi-Fi网络
• 获取电脑的局域网IP：
  • Windows：打开命令提示符，输入ipconfig，找到无线网卡的IPv4地址
  • Mac/Linux：打开终端，输入ifconfig或ip addr，找到Wi-Fi对应的IP
• 修改globals.dart中的baseURL：

  // 替换为你的电脑局域网IP，示例：192.168.1.100，端口保持Spring Boot的8080
  const String baseURL = "http://192.168.1.100:8080";
  

  注意：默认Spring Boot用HTTP协议，若后端配置了HTTPS才用https，不要写错协议

3. 解决Spring Boot访问限制 #

• 添加跨域支持：在Spring Boot的Controller类上添加@CrossOrigin注解，或配置全局跨域规则
• 临时关闭电脑防火墙（或开放8080端口），避免拦截请求
• 用手机浏览器访问http://你的电脑IP:8080，若能看到返回的JSON数据，说明地址配置正确

4. 捕获Flutter请求异常 #

修改getTasks方法添加异常捕获，避免请求失败后任务列表一直为null：

getTasks() async {
  try {
    tasks = await Db_services.getTasks();
    Provider.of<TasksData>(context, listen: false).tasks = tasks!;
  } catch (e) {
    print("API请求失败: $e");
    // 可在此处添加错误提示UI
  } finally {
    setState(() {});
  }
}

5. 检查Spring Boot服务状态 #

确保Spring Boot服务正在运行，且端口为8080（若修改过端口，需同步更新baseURL）

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