Flutter发送http.post请求出现400 BAD Request错误如何解决

你调用接口时提交的请求格式与后端要求不匹配：后端明确要求POST请求的body为x-www-form-urlencoded格式，但你当前代码设置了Content-Type为application/json，同时提交了JSON格式的请求体，后端无法解析因此返回400错误。

原生HttpClient实现 #

修改请求头的Content-Type，并构造url编码格式的请求体即可，修复后代码如下：

import 'dart:io';
import 'dart:convert';

Future callApi(String district, String season, String minTemp, String maxTemp) async {
  Uri url = Uri.parse('https://agrocare-api.herokuapp.com/predictCrop');
  final client = HttpClient();
  final request = await client.postUrl(url);
  // 修改为后端要求的请求格式
  request.headers.set(HttpHeaders.contentTypeHeader, "application/x-www-form-urlencoded; charset=UTF-8");
  // 构造符合格式的请求参数
  final params = {
    'district': district,
    'season': season,
    'min_temp': minTemp,
    'max_temp': maxTemp
  };
  request.write(Uri(queryParameters: params).query);
  final response = await request.close();
  response.transform(utf8.decoder).listen((contents) {
    print(contents);
  });
  return response;
}

http包实现 #

使用官方http包无需手动处理编码，直接传入Map类型的body即可，示例代码：

import 'package:http/http.dart' as http;

Future callApi(String district, String season, String minTemp, String maxTemp) async {
  Uri url = Uri.parse('https://agrocare-api.herokuapp.com/predictCrop');
  final response = await http.post(
    url,
    body: {
      'district': district,
      'season': season,
      'min_temp': minTemp,
      'max_temp': maxTemp
    },
  );
  print(response.body);
  return response;
}

注：http包传入Map类型的body时，会自动设置Content-Type为application/x-www-form-urlencoded，无需手动指定。

Dio包实现 #

Dio包默认传入Map类型的data时也会自动使用x-www-form-urlencoded格式提交，示例代码：

import 'package:dio/dio.dart';

Future callApi(String district, String season, String minTemp, String maxTemp) async {
  final dio = Dio();
  const url = 'https://agrocare-api.herokuapp.com/predictCrop';
  final response = await dio.post(
    url,
    data: {
      'district': district,
      'season': season,
      'min_temp': minTemp,
      'max_temp': maxTemp
    },
  );
  print(response.data);
  return response;
}

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