Flutter Web生产构建缺失Content-Length与Host请求头致API请求失败

核心背景 #

Host和Content-Length属于浏览器自动管理的「不安全请求头」，开发者无法手动添加（Chrome会直接拒绝）。生产环境缺失这两个头，本质是Flutter Web的请求配置导致浏览器没触发自动添加逻辑，而非头被主动删除。

解决步骤 #

• 明确设置Content-Type头
  对于POST/PUT等带请求体的请求，必须显式指定Content-Type（如application/json）。浏览器只有识别到请求存在实体内容时，才会自动计算并添加Content-Length。
  示例（Dio）：

  final response = await dio.post(
    '/api/your-endpoint',
    data: {"param": "value"},
    options: Options(headers: {"Content-Type": "application/json"}),
  );
  

  示例（原生http包）：

  final response = await http.post(
    Uri.parse('https://your-api-domain.com/endpoint'),
    headers: {"Content-Type": "application/json"},
    body: jsonEncode({"param": "value"}),
  );
  

• 检查CORS与预请求逻辑
  如果是跨域请求，浏览器会先发OPTIONS预请求（该请求本身无请求体，不会带Content-Length）。若服务器未正确配置CORS，可能导致实际请求未触发，服务器误将OPTIONS请求当作业务请求返回错误。此时需确认：

  • 服务器允许你的请求方法（POST/PUT等）和自定义头；
  • Flutter Web请求未被拦截或篡改。

• 强制切换为XMLHttpRequest实现
  Flutter Web生产环境默认用Fetch API，部分场景下可能存在头自动添加的兼容问题。可强制切换回XMLHttpRequest，在main.dart开头添加：

  import 'package:flutter/foundation.dart';
  
  void main() {
    if (kIsWeb) {
      debugDefaultTargetPlatformOverride = TargetPlatform.android;
    }
    runApp(YourApp());
  }
  

  该配置通过模拟Android平台网络请求逻辑，强制使用XMLHttpRequest，通常能解决Fetch API的头缺失问题。

• 排查服务器端校验逻辑
  若以上操作无效，需检查服务器端：

  • 是否误要求GET请求携带Content-Length（GET请求无请求体，浏览器不会自动添加）；
  • 是否反向代理（如Nginx）或安全工具过滤了Host/Content-Length头；
  • 是否服务器端的头校验规则过于严格，忽略了浏览器的默认行为。

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