在使用Flutter开发跨平台应用程序时，API调用是一个常见的任务。GetConnect作为GetX包的一部分，为开发者提供了一个简单而强大的方式来处理HTTP请求。然而，开发者常常会遇到一些特定平台的问题。本文将通过一个实际案例，探讨如何在Flutter Web中解决GetConnect的Content-Type问题。

问题描述

我使用GetConnect进行API调用，代码如下：

class ApiProvider extends GetConnect {
    @override
    void onInit() {
        httpClient.baseUrl = BASE_URL;
        httpClient.defaultContentType = "application/json";
        httpClient.maxAuthRetries = 3;
        httpClient.timeout = Duration(seconds: 600);
    }

    Future<Response> loginUserApi(LoginRequest data) =>
      post("v1/user/signIn", json.encode(data.toJson()),
          contentType: "application/json" , headers: {
            'Content-Type': 'application/json',
            'Accept': '*/*',
            'App-ID': 'CUSTOMER',
          });
}

这个函数在Android和iOS设备上运行良好，但在Flutter Web上却出现了问题。具体表现为：

• 控制台报错：[GETX] Cannot decode server response to json
• 网络请求的响应状态码为415（Unsupported Media Type）

问题分析

通过Chrome的网络面板调试，我发现了一个有趣的现象：在设置Content-Type为application/json时，实际上在请求头中出现了两次这个值，表现为"application/json application/json"。这导致服务器无法正确识别请求类型，进而返回415错误。

解决方案

要解决这个问题，我们需要考虑到Flutter Web和移动端的差异。以下是修改后的代码：

class BffApiProvider extends GetConnect {
  @override
  void onInit() {
    httpClient.baseUrl = BFF_BASE_URL;
    httpClient.defaultContentType = "application/json";
    httpClient.maxAuthRetries = 3;
    httpClient.timeout = Duration(seconds: 600);
    
    var headers;
    if (kIsWeb) {
      headers = {
        'Accept': 'application/json',
      };
    } else {
      headers = {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
      };
    }
  }

  Future<Response> loginUserApi(LoginRequest data) =>
      post("user/signIn", json.encode(data.toJson()));
}

关键点：

1. 判断平台：使用kIsWeb来区分Web和移动端。
2. 设置头部：在Web环境下，只设置Accept头部，因为httpClient.defaultContentType已在初始化时设置为application/json。在移动端，需要显式设置Content-Type。
3. 简化请求：移除了不必要的contentType参数，因为httpClient.defaultContentType已经设置好了。

结论

通过上述修改，确保了POST请求在所有平台上都能正确处理Content-Type问题。开发者在使用GetConnect进行API调用时，应该特别注意平台特有的配置问题。希望这个解决方案能帮助到其他使用GetConnect进行API调用的Flutter开发者。保持代码的平台兼容性是跨平台开发中的关键一环，愿你编程之路顺利！