如何在 flutter http post 请求中自定义 header

Question

我想提出一个简单的 post 请求，但有些东西不起作用。

在 front-end angular 中，http headers 是这样制作的：

let header = {
      headers: new HttpHeaders({
        "Content-Type": "application/json",
        user: JSON.stringify(JSON.parse(localStorage.getItem("user")).values)
      })
    };

在应用程序 Flutter 中，我试图做类似的事情，但我所做的一切 returns 错误 500 因为 headers 不正确

技术上我需要那样做

final Map< String, String> headers = {
      "Content-Type" : "application/json",
      "user" : { 
                 "token": "BLABLABLA",
                 "user_id" : "1"
               } 
} ;

这必须像 angular 的前端一样工作，因为后端是这样完成的

登录已完成并正常工作，我们正在使用 SharedPreferences 保存登录信息

Answer 1

这是个好问题。很多人都使用基础 http 库的包装器库，但听起来你只是在使用基础库。我认为问题是你正在构建一个 header 就好像它是 Map<String, dynamic> 而实际上它需要是 Map<String, String>.

根据您的服务器设置，您可能会像这样让它工作：

final Map< String, String> headers = {
  "Content-Type" : "application/json",
  "user" : jsonEncode({ // add this function call around your object
             "token": "BLABLABLA",
             "user_id" : "1"
           }),
};

使用上面的这个将创建两个 headers:

Content-Type: application/json
user: {"token":"BLABLABLA","user_id":1}

但是您可能不希望这样，因为某些服务器不喜欢 header 内容中的 {} 或 "" 字符。相反，您可以再做两种变化：

=Base 64 方法=

尝试对 header 中的 json 字符串进行 base64 编码，然后在服务器端对其进行 base64 解码：

final Map< String, String> headers = {
  "Content-Type" : "application/json",
  "user" : stringToBase64.encode( // additionally base64 encode it
             jsonEncode({ // add this function call around your object
               "token": "BLABLABLA",
               "user_id" : "1"
             }),
           ),
};

=URL编码方式=

urlencode header 应该适用于大多数服务器：

final Map< String, String> headers = {
  "Content-Type" : "application/json",
  "user" : Uri.encodeQueryComponent( // additionally base64 encode it
             jsonEncode({ // add this function call around your object
               "token": "BLABLABLA",
               "user_id" : "1"
             }),
           ),
};

=建议=

如果您只是想使用基本的 JWT，您可能只想跳过整个用户参数并将您的令牌粘贴到标准 Authorization: Bearer TOKEN 格式。这是我从我的一个项目中提取和修改的工作示例，它正是这样做的：

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

String _getToken() {
  return 'MY_BEARER_TOKEN';
}

class BaseNetworking {
  Future<http.Response> post(
    String url,
    Map<String, dynamic> data, {
    Map<String, String> headers,
  }) async {
    final Uri uri = Uri.parse(url);

    return await http.post(
      uri,
      headers: _buildHeaders(
        requiresAuth: true,
        extra: headers,
      ),
      body: jsonEncode(data),
    );
  }

  /// build the headers for the given request. might include authorization or any number of other headers
  Map<String, String> _buildHeaders({
    bool requiresAuth = true,
    Map<String, String> extra,
  }) {
    final Map<String, String> headers = <String, String>{
      'Accept': 'application/json; charset=utf-8',
      'User-Agent': 'AppName (version: 1.0.0)',
    };

    if (extra is Map<String, String>) {
      headers.addAll(extra);
    }

    if (requiresAuth) {
      headers['Authorization'] = 'Bearer ${_getToken()}';
    }

    return headers;
  }
}

如何在 flutter http post 请求中自定义 header

How to make custom header in flutter http post request

http-post

http-headers

flutter