如何使托管JSON数据被Postman识别为JSON而非HTML供Flutter使用

当前托管链接被识别为HTML而非JSON，本质是两个因素共同导致的：

• 上传的文件携带HTML标签包裹JSON内容，不符合纯JSON响应的规范
• 静态托管服务器会根据文件后缀自动匹配响应头，.html后缀的文件会被强制返回text/html格式的Content-Type响应头，Postman、Flutter的请求客户端都是优先通过这个响应头判断返回数据格式，而非仅解析内容本身。

方案1：替换文件类型（推荐，操作成本最低） #

• 删除原有文件里所有HTML标签，把纯JSON内容直接保存为后缀为.json的文件（例如命名为users.json），替换原来的.html文件上传到托管空间
  • 静态托管服务器对.json后缀的文件会自动返回application/json的标准响应头，不需要额外配置
  • 替换后文件里不需要任何<body>、<div>这类标签，直接存纯JSON串即可，参考示例：

{"page":1,"per_page":6,"total":12,"total_pages":2,"data":[{"id":1,"email":"george.bluth@reqres.in","first_name":"George","last_name":"Bluth","avatar":"https://reqres.in/img/faces/1-image.jpg"},{"id":2,"email":"janet.weaver@reqres.in","first_name":"Janet","last_name":"Weaver","avatar":"https://reqres.in/img/faces/2-image.jpg"},{"id":3,"email":"emma.wong@reqres.in","first_name":"Emma","last_name":"Wong","avatar":"https://reqres.in/img/faces/3-image.jpg"},{"id":4,"email":"eve.holt@reqres.in","first_name":"Eve","last_name":"Holt","avatar":"https://reqres.in/img/faces/4-image.jpg"},{"id":5,"email":"charles.morris@reqres.in","first_name":"Charles","last_name":"Morris","avatar":"https://reqres.in/img/faces/5-image.jpg"},{"id":6,"email":"tracey.ramos@reqres.in","first_name":"Tracey","last_name":"Ramos","avatar":"https://reqres.in/img/faces/6-image.jpg"}],"support":{"url":"https://reqres.in/#support-heading","text":"To keep ReqRes free, contributions towards server costs are appreciated!"}}

• 访问对应users.json的链接时，Postman就会自动识别为JSON格式，不需要额外调整请求参数。

方案2：保留HTML后缀的自定义配置 #

如果因为业务要求必须使用.html后缀承载数据，可通过Apache环境的.htaccess配置单独调整对应文件的响应头：

• 在托管根目录新建.htaccess文件，写入规则，仅针对承载JSON数据的那个HTML文件调整响应类型，不要全局配置避免影响正常网页访问：

<Files "你放数据的那个html文件名.html">
  ForceType application/json
  Header set Content-Type "application/json"
</Files>

方案3：Flutter端的兜底适配 #

哪怕响应头识别存在偏差，也可以在Flutter代码层跳过响应头判断，直接对返回的字符串做JSON解析，不需要依赖接口的Content-Type判断，参考示例：

Future<Map<String, dynamic>> fetchUserData() async {
  final response = await http.get(Uri.parse("你的托管文件访问链接"));
  // 不校验响应头的contentType，直接解析返回的字符串内容
  return jsonDecode(response.body) as Map<String, dynamic>;
}

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