Flutter调用API时触发Invalid media type异常，求解决方案

异常原因 #

这个错误是由于HTTP请求/响应的媒体类型格式不合法导致的：

• 要么是你发送的Accept头格式触发了服务器异常解析逻辑（虽然application/json是标准格式，但部分服务器对请求头的处理存在兼容问题）
• 要么是API返回的Content-Type响应头格式错误（比如缺少斜杠，写成applicationjson而非application/json）

解决方案及代码修正 #

1. 简化请求头，验证API响应

先移除请求中的Accept头，测试能否正常获取数据：

final response = await http.get(Uri.parse('https://stackvaly.com/questionbankappsapi/datafetch.php'));

如果去掉后请求正常，说明服务器对Accept头的处理有问题，后续可尝试用宽松头"Accept": "*/*"替代。

2. 修复状态管理与UI刷新问题

原代码中异步请求后未触发UI更新，且直接操作全局列表的方式不规范。改用FutureBuilder处理异步状态，同时覆盖加载、成功、错误等场景：

修正后的CategoryList代码：

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:flutter/material.dart';
import '../models/category.dart';

class CategoryList extends StatefulWidget {
  const CategoryList({super.key});

  @override
  State<CategoryList> createState() => _CategoryListState();
}

class _CategoryListState extends State<CategoryList> {
  late Future<List<Category>> _futureCategories;

  Future<List<Category>> fetchData() async {
    final response = await http.get(Uri.parse('https://stackvaly.com/questionbankappsapi/datafetch.php'));

    if (response.statusCode == 200) {
      final List<dynamic> data = json.decode(response.body);
      return data.map((json) => Category.fromJson(json)).toList();
    } else {
      throw Exception('Failed to load data from API');
    }
  }

  @override
  void initState() {
    _futureCategories = fetchData();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<Category>>(
      future: _futureCategories,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(child: CircularProgressIndicator());
        } else if (snapshot.hasError) {
          return Center(child: Text('加载失败: ${snapshot.error}'));
        } else if (snapshot.hasData) {
          final categories = snapshot.data!;
          return ListView.builder(
            itemCount: categories.length,
            itemBuilder: (context, index) {
              final category = categories[index];
              return Container(
                padding: const EdgeInsets.all(12.0),
                margin: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
                decoration: BoxDecoration(
                  color: const Color.fromARGB(95, 179, 173, 173),
                  borderRadius: BorderRadius.circular(15.0),
                ),
                child: Row(
                  children: [
                    Text(
                      'ID: ${category.id}',
                      style: const TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
                    ),
                    const SizedBox(width: 16),
                    Text(
                      category.name,
                      style: const TextStyle(fontSize: 14),
                    )
                  ],
                ),
              );
            },
          );
        } else {
          return const Center(child: Text('暂无数据'));
        }
      },
    );
  }
}

3. 细节优化

• 移除重复导入的dart:convert
• 修复原ListView中重复显示name的问题，改为展示id和name
• 添加列表项外边距提升美观度
• 补充加载、错误、无数据的状态提示

额外排查建议 #

如果移除Accept头后仍报错：

• 用浏览器直接访问API地址，查看返回的Content-Type响应头是否为合法格式
• 检查API返回内容是否为标准JSON（比如是否存在语法错误）

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