如何修复Content-Length不安全标头设置问题？首次调用API报错刷新正常

问题根源 #

你的请求代码存在两个核心错误：

• content-length是浏览器自动计算并添加的请求头，手动设置会触发浏览器的“不安全头”限制，这就是首次调用报错的直接原因。
• Access-Control-Allow-Origin、Access-Control-Allow-Credentials这类头是服务器返回的响应头，不是客户端请求时该携带的，你把它们放到请求headers里完全无效，还会干扰浏览器的OPTIONS预检请求处理。

首次请求报错、刷新后正常，是因为浏览器第一次发送OPTIONS预检请求时，错误的请求头导致校验失败；刷新后浏览器可能缓存了之前的预检结果，或者后续请求跳过了预检流程，所以能正常获取响应。

修复步骤及代码 #

直接移除所有错误的请求头，只保留业务必要的内容（比如认证Token，若有需要），修改后的代码如下：

import 'dart:html';

import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:get/get.dart';
import 'package:shndz/constants.dart';

import '../model/get_sms_model.dart';

// model service is : GetSmsCode

class ServiceSendCode extends GetConnect implements GetxService {
  Map<String, String> authorizationh = {};
  Map<String, String> bodyMap = {};
  String phoneNumber = "";

  ServiceSendCode(this.phoneNumber);

  Future<GetSmsCode> postData(BuildContext context) async {
    bodyMap = {
      'phone_number': phoneNumber,
    };

    // 仅保留业务必要的请求头，比如认证Token；CORS相关头和content-length全部移除
    authorizationh = {
      // 示例：如果需要指定Content-Type，可按需添加（GetConnect通常会自动处理表单/JSON格式）
      // "Content-Type": "application/json",
    };

    var res = await post(config.loginUrl, bodyMap, headers: authorizationh);

    // 先做非空判断，避免res为空导致崩溃
    if (res == null) {
      toastWarning('Error', 'Request failed', context, true);
      EasyLoading.dismiss();
      return GetSmsCode(); // 返回默认实例或抛出异常，根据业务调整
    }

    if (res.statusCode == 401) {
      toastWarning(
          'Error',
          'Verification code just sent. Please try again in a few seconds',
          context,
          true);
      EasyLoading.dismiss();
    } else if (res.statusCode == 200) {
      toastSuccess('Send sms code', context, true);
      EasyLoading.dismiss();
      Get.toNamed(Rverification);
    }

    return GetSmsCode.fromJson(res.body);
  }
}

额外注意事项 #

• 确认服务器已正确配置CORS响应头：服务器需要在OPTIONS预检请求和POST请求的响应中，返回Access-Control-Allow-Origin（指定你的前端域名或*）、Access-Control-Allow-Methods、Access-Control-Allow-Headers等必要头，否则即使客户端代码修复，跨域请求仍可能失败。
• 避免手动设置浏览器自动管理的请求头，比如content-length、host、user-agent等，这些属于浏览器的安全限制范畴，手动设置会触发错误。

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