使用Dio与JWT插件开发Flutter WooCommerce客户注册遇404路由错误

开发Flutter WooCommerce商城应用时，通过Dio创建新客户，配合WordPress插件JWT Authentication for WP REST API做身份验证，但访问接口URL https://example.com/wp-json/wc/v3/customers 时返回404错误，响应内容如下：

{"code":"rest_no_route","message":"No route was found matching the URL and request method.","data":{"status":404}}

现有代码 #

Customer Model文件

class CustomerModel {
  String email;
  String firstName;
  String lastName;
  String password;
  CustomerModel(
      {required this.email,
      required this.firstName,
      required this.lastName,
      required this.password});
  Map<String, dynamic> toJson() {
    Map<String, dynamic> map = {};
    map.addAll({
      'email': email,
      'first_name': firstName,
      'last_name': lastName,
      'password': password,
      'username': email
    });
    return map;
  }
}

API Model文件

Future<bool> createCustomer(CustomerModel model) async {
    var authToken =
        base64.encode(utf8.encode(Config.key + ':' + Config.sceret));
    print(authToken);
    bool ret = false;
    try {
      print("${Config.url+ Config.customerURL}");
      var response = await Dio().post(Config.url + Config.customerURL,
          data: model.toJson(),
          options: new Options(headers: {
            HttpHeaders.authorizationHeader: 'Basic $authToken',
            HttpHeaders.contentTypeHeader: 'application/json'
          }));

      print(response.statusCode);
      if (response.statusCode == 201) {
        ret = true;
      }
    } on DioError catch (e) {
      if (e.response?.statusCode == 404) {
        ret = false;
      } else {
        ret = false;
      }
    }
    return ret;
  }

问题排查与解决方案 #

• 修正拼写错误：API代码中Config.sceret是拼写错误，应为Config.secret，这会导致生成的Basic Auth Token无效，直接影响接口访问权限。
• 验证URL正确性：确认Config.url与Config.customerURL拼接后是完整有效的接口地址，避免出现重复斜杠（如https://example.com//wp-json/...）或路径缺失。
• 检查WooCommerce REST API配置：登录WordPress后台，进入WooCommerce → 设置 → 高级 → REST API，确保已生成具备读写客户权限的Consumer Key和Consumer Secret，且REST API功能处于启用状态。
• 确认权限配置：生成Consumer Key时，需选择支持write_customers的权限级别，否则无法调用创建客户的接口。
• 优化Dio实例使用：避免每次请求都创建新的Dio实例，建议复用全局Dio对象，提升请求效率并便于统一配置。

修正后的API代码示例 #

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

Future<bool> createCustomer(CustomerModel model) async {
    // 修正secret拼写错误
    var authToken = base64.encode(utf8.encode('${Config.key}:${Config.secret}'));
    print(authToken);
    bool ret = false;
    // 复用Dio实例
    final dio = Dio();
    try {
      final fullUrl = '${Config.url}${Config.customerURL}';
      print(fullUrl);
      var response = await dio.post(
        fullUrl,
        data: model.toJson(),
        options: Options(
          headers: {
            HttpHeaders.authorizationHeader: 'Basic $authToken',
            HttpHeaders.contentTypeHeader: 'application/json',
          },
        ),
      );

      print(response.statusCode);
      ret = response.statusCode == 201;
    } on DioError catch (e) {
      print('请求异常: ${e.message}');
      if (e.response != null) {
        print('错误详情: ${e.response?.data}');
      }
      ret = false;
    }
    return ret;
  }

内容的提问来源于stack exchange，提问作者SYED RAKIBUL HASAN