Django REST API与Flutter移动端连接问题求助

问题2：类型转换错误（type 'String' is not a subtype of type 'Iterable<dynamic>'） #

这个错误源于API响应解析逻辑的冗余操作：

• jsonDecode(jsonEncode(response.body))属于无效操作：response.body本身就是JSON格式字符串，先jsonEncode会将其转成转义后的字符串，再jsonDecode得到的还是原字符串，而非预期的数组类型，导致遍历失败。
• 直接解析response.body即可，同时要先校验响应状态码，确保API请求成功。

修改后的APIHandler代码：

class APIHandler {
  static Future<List<ShowsModel>> getAllShows() async {
    var uri = Uri.http(
      BASE_URL,
      "/show",
    );
    var response = await http.get(uri);
    
    // 先校验响应状态码，排除请求失败情况
    if (response.statusCode != 200) {
      throw Exception('Failed to load shows: ${response.statusCode}');
    }
    
    // 直接解析响应体，无需多余的jsonEncode操作
    var data = jsonDecode(response.body);
    return ShowsModel.showsFromSnapshot(List.from(data));
  }
}

问题1：XMLHttpRequest错误（Chrome/模拟器连接失败） #

核心原因：Django CORS配置缺失 #

Postman不受跨域限制，但Flutter Web/Android模拟器的前端请求必须经过Django的CORS授权才能正常访问。

解决步骤：

1. 安装Django跨域插件：

pip install django-cors-headers

2. 修改Django项目的settings.py：

# 添加到INSTALLED_APPS列表
INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]

# 添加到MIDDLEWARE列表，注意要放在CommonMiddleware之前
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

# 开发环境允许所有跨域请求（生产环境请指定具体允许的域名）
CORS_ALLOW_ALL_ORIGINS = True

# 确保ALLOWED_HOSTS包含你的Django服务器地址，本地开发示例：
ALLOWED_HOSTS = ['127.0.0.1', 'localhost']

3. 重启Django开发服务器。

额外检查项： #

• BASE_URL配置要正确：如果Django跑在127.0.0.1:8000，BASE_URL应设为'127.0.0.1:8000'（无需加http前缀，因为使用了Uri.http）。
• Android模拟器访问本地Django：不要用127.0.0.1，改用10.0.2.2（模拟器的本地回环地址对应主机的127.0.0.1），所以模拟器环境下BASE_URL需改为'10.0.2.2:8000'。

图片加载失败问题 #

可能原因及解决： #

1. 图片URL为相对路径：如果Django返回的image字段是/media/show/image.jpg这类相对路径，Flutter无法直接加载，需要拼接完整URL。修改ShowsModel.fromJson：

// 假设BASE_URL是你的Django服务器地址
image = json['image'].map((imgPath) => 'http://$BASE_URL$imgPath').cast<String>();

2. Django未配置媒体文件服务：开发环境下需在项目根urls.py中添加媒体文件路由：

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    ...
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

同时确保settings.py中已配置：

MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'

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