如何修复 Flutter Web 项目上的 XMLHttpRequest (CORS) 异常

问题描述 投票：0回答：3

我的问题

最后，我发现我的项目中的错误与 null 变量无关，而是与 Flutter Web 项目上的 XMLHttpRequest (CORS) 有关，我认为与 null 变量有关。然而，我决定改变我的标题主题并说出存在什么问题

我的杰森：

{
    "success": true,
    "status_code": 200,
    "error": null,
    "data": {
        "message": "sussecc!",
        "has_paginate": 0,
        "results": {
            "user": {
                "id": 1,
                "full_name": "emin",
                "phone_number": "+1125585",
                "admin_role": "0",
                "national_id": "21",
                "address": null,
                "is_active": "1",
                "email": null,
                "email_verified_at": "2023-12-04 20:41:41",
                "created_at": "2023-12-04T17:11:42.000000Z",
                "updated_at": "2023-12-04T17:11:42.000000Z"
            },
            "token": "31|ssasdsdfsdgeedewfsdvfdbdfve3svxfb"
        }
    }
}

我的模特班：

class ModelLoginService {
  ModelLoginService({
    required this.success,
    required this.statusCode,
    required this.error,
    required this.data,
  });
  late final bool success;
  late final int statusCode;
  late final dynamic? error;
  late final Data? data;

  ModelLoginService.fromJson(Map<String, dynamic> json) {
    success = json['success'];
    statusCode = json['status_code'];
    error = Error.fromJson(json['error']);
    data = Data.fromJson(json['data']);
  }

  Map<String, dynamic> toJson() {
    final _data = <String, dynamic>{};
    _data['success'] = success;
    _data['status_code'] = statusCode;
    _data['error'] = error!.toJson() == null ? null : error.toJson();
    _data['data'] = data!.toJson() == null ? null : error.toJson();
    return _data;
  }
}

class Error {
  Error({
    required this.message,
    required this.errors,
  });
  late final String? message;
  late final Errors? errors;

  Error.fromJson(Map<String, dynamic> json) {
    message = json['message'];
    errors = Errors.fromJson(json['errors']);
  }

  Map<String, dynamic> toJson() {
    final _data = <String, dynamic>{};
    _data['message'] = message!;
    _data['errors'] = errors!.toJson().isEmpty;
    return _data;
  }
}

class Errors {
  Errors({
    required this.reason,
    required this.message,
  });
  late final String reason;
  late final String message;

  Errors.fromJson(Map<String, dynamic> json) {
    reason = json['reason'];
    message = json['message'];
  }

  Map<String, dynamic> toJson() {
    final _data = <String, dynamic>{};
    _data['reason'] = reason;
    _data['message'] = message;
    return _data;
  }
}

class Data {
  Data({
    required this.message,
    required this.hasPaginate,
    required this.results,
  });
  late final String message;
  late final int hasPaginate;
  late final Results results;

  Data.fromJson(Map<String, dynamic> json) {
    message = json['message'];
    hasPaginate = json['has_paginate'];
    results = Results.fromJson(json['results']);
  }

  Map<String, dynamic> toJson() {
    final _data = <String, dynamic>{};
    _data['message'] = message;
    _data['has_paginate'] = hasPaginate;
    _data['results'] = results.toJson();
    return _data;
  }
}

class Results {
  Results({
    required this.user,
    required this.token,
  });
  late final User user;
  late final String token;

  Results.fromJson(Map<String, dynamic> json) {
    user = User.fromJson(json['user']);
    token = json['token'];
  }

  Map<String, dynamic> toJson() {
    final _data = <String, dynamic>{};
    _data['user'] = user.toJson();
    _data['token'] = token;
    return _data;
  }
}

class User {
  User({
    required this.id,
    required this.fullName,
    required this.phoneNumber,
    required this.adminRole,
    required this.nationalId,
    required this.address,
    required this.isActive,
    required this.email,
    required this.emailVerifiedAt,
    required this.createdAt,
    required this.updatedAt,
  });
  late final int id;
  late final String fullName;
  late final String phoneNumber;
  late final String adminRole;
  late final String nationalId;
  late final String? address;
  late final String isActive;
  late final String? email;
  late final String emailVerifiedAt;
  late final String createdAt;
  late final String updatedAt;

  User.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    fullName = json['full_name'];
    phoneNumber = json['phone_number'];
    adminRole = json['admin_role'];
    nationalId = json['national_id'];
    address = json['address'] == null ? null : json['address'];
    isActive = json['is_active'];
    email = json['email'] == null ? null : json['email'];
    emailVerifiedAt = json['email_verified_at'];
    createdAt = json['created_at'];
    updatedAt = json['updated_at'];
  }

  Map<String, dynamic> toJson() {
    final _data = <String, dynamic>{};
    _data['id'] = id;
    _data['full_name'] = fullName;
    _data['phone_number'] = phoneNumber;
    _data['admin_role'] = adminRole;
    _data['national_id'] = nationalId;
    _data['address'] = address;
    _data['is_active'] = isActive;
    _data['email'] = email;
    _data['email_verified_at'] = emailVerifiedAt;
    _data['created_at'] = createdAt;
    _data['updated_at'] = updatedAt;
    return _data;
  }
}

我的获取 JSON 服务

class ServiceLogin extends GetConnect implements GetxService {
  Map<String, String> authorizationh = {};
  Map<String, dynamic> bodyMap = {};
  String username = "", password = "";

  Future<ModelLoginService> postData() async {
    bodyMap = {
      'full_name': 'admin',
      'password': 'c1992885',
    };

    var response = await post('http://test.com/admin/api/login', bodyMap);

    print('response.body ${response.body}');
    return ModelLoginService.fromJson(response.body);
  }
}

错误日志

Performing hot restart...
Waiting for connection from debug service on Edge...
Restarted application in 743ms.
[GETX] Instance "GetMaterialController" has been created
[GETX] Instance "GetMaterialController" has been initialized
[GETX] Instance "ApiController" has been created
[GETX] Instance "ApiController" has been initialized
response.body null
Error: Expected a value of type 'Map<String, dynamic>', but got one of type 'Null'
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 294:3       throw_
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 127:3       castError
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 818:12  cast
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/classes.dart 652:14     as_C
packages/shndz_panel/services/service_login.dart 21:30                            postData
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 45:50                <fn>
dart-sdk/lib/async/zone.dart 1661:54                                              runUnary
dart-sdk/lib/async/future_impl.dart 162:18                                        handleValue
dart-sdk/lib/async/future_impl.dart 846:44                                        handleValueCallback
dart-sdk/lib/async/future_impl.dart 875:13                                        _propagateToListeners
dart-sdk/lib/async/future_impl.dart 655:5                                         [_completeError]
dart-sdk/lib/async/future_impl.dart 745:7                                         callback
dart-sdk/lib/async/schedule_microtask.dart 40:11                                  _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5                                   _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 181:7                <fn>

我在模型中的 flutter 中使用了可空类型，并期望这个问题不会发生，但我找不到解决它的最佳方法

json flutter dart xmlhttprequest
3个回答
0
投票

使用此可选模型而不是必需模型，但始终建议使用 json 和 get 的数据部分。检查成功或状态代码
导入 'dart:convert';

class UserLoginModel {
    final bool? success;
    final int? statusCode;
    final dynamic error;
    final Data? data;

    UserLoginModel({
        this.success,
        this.statusCode,
        this.error,
        this.data,
    });

    factory UserLoginModel.fromRawJson(String str) => UserLoginModel.fromJson(json.decode(str));

    String toRawJson() => json.encode(toJson());

    factory UserLoginModel.fromJson(Map<String, dynamic> json) => UserLoginModel(
        success: json["success"],
        statusCode: json["status_code"],
        error: json["error"],
        data: json["data"] == null ? null : Data.fromJson(json["data"]),
    );

    Map<String, dynamic> toJson() => {
        "success": success,
        "status_code": statusCode,
        "error": error,
        "data": data?.toJson(),
    };
}

class Data {
    final String? message;
    final int? hasPaginate;
    final Results? results;

    Data({
        this.message,
        this.hasPaginate,
        this.results,
    });

    factory Data.fromRawJson(String str) => Data.fromJson(json.decode(str));

    String toRawJson() => json.encode(toJson());

    factory Data.fromJson(Map<String, dynamic> json) => Data(
        message: json["message"],
        hasPaginate: json["has_paginate"],
        results: json["results"] == null ? null : Results.fromJson(json["results"]),
    );

    Map<String, dynamic> toJson() => {
        "message": message,
        "has_paginate": hasPaginate,
        "results": results?.toJson(),
    };
}

class Results {
    final User? user;
    final String? token;

    Results({
        this.user,
        this.token,
    });

    factory Results.fromRawJson(String str) => Results.fromJson(json.decode(str));

    String toRawJson() => json.encode(toJson());

    factory Results.fromJson(Map<String, dynamic> json) => Results(
        user: json["user"] == null ? null : User.fromJson(json["user"]),
        token: json["token"],
    );

    Map<String, dynamic> toJson() => {
        "user": user?.toJson(),
        "token": token,
    };
}

class User {
    final int? id;
    final String? fullName;
    final String? phoneNumber;
    final String? adminRole;
    final String? nationalId;
    final dynamic address;
    final String? isActive;
    final dynamic email;
    final DateTime? emailVerifiedAt;
    final DateTime? createdAt;
    final DateTime? updatedAt;

    User({
        this.id,
        this.fullName,
        this.phoneNumber,
        this.adminRole,
        this.nationalId,
        this.address,
        this.isActive,
        this.email,
        this.emailVerifiedAt,
        this.createdAt,
        this.updatedAt,
    });

    factory User.fromRawJson(String str) => User.fromJson(json.decode(str));

    String toRawJson() => json.encode(toJson());

    factory User.fromJson(Map<String, dynamic> json) => User(
        id: json["id"],
        fullName: json["full_name"],
        phoneNumber: json["phone_number"],
        adminRole: json["admin_role"],
        nationalId: json["national_id"],
        address: json["address"],
        isActive: json["is_active"],
        email: json["email"],
        emailVerifiedAt: json["email_verified_at"] == null ? null : DateTime.parse(json["email_verified_at"]),
        createdAt: json["created_at"] == null ? null : DateTime.parse(json["created_at"]),
        updatedAt: json["updated_at"] == null ? null : DateTime.parse(json["updated_at"]),
    );

    Map<String, dynamic> toJson() => {
        "id": id,
        "full_name": fullName,
        "phone_number": phoneNumber,
        "admin_role": adminRole,
        "national_id": nationalId,
        "address": address,
        "is_active": isActive,
        "email": email,
        "email_verified_at": emailVerifiedAt?.toIso8601String(),
        "created_at": createdAt?.toIso8601String(),
        "updated_at": updatedAt?.toIso8601String(),
    };
}
0
投票

这是阻碍 Web Flutter 中 API 调用的主要问题。所以我终于在搜索中找到并在我的主题中设置了答案

每个 flutter web 上的

XMLHttpRequest (CORS) 异常

我花了时间研究它。问题已经存在并且需要 突出显示。这个问题很多人都遇到过，可以验证一下 在 Google 上进行一次搜索后，没有找到解决方案 直接在 Flutter 中。

只有我是开发者才能解决CORS问题 API。我可以向它或服务器添加 CORS 配置，它就会工作 在 Flutter Web 中很好，但在使用第 3 方 API 后，它继续给出 无法解决的错误。我尝试过多个公开的 API。

我发现的唯一方法是制作第3方的中间件API API，添加CORS配置，然后在Flutter Web中使用但是 而不是所有这些过程 Flutter Web 不应该直接能够 处理所有这些麻烦吗？

-1
投票

您的 JSON 响应似乎有一些可为空的字段，例如 

address
和 
email
。将这些字段映射到您的模型时，您需要考虑这些字段可能是 JSON 中的 
null
的可能性。

在您的 

User.fromJson
方法中，您已经通过检查 JSON 中的可空字段（如 
address
和 
email
）是否为 null 并相应地分配它们来处理它们的转换：

address = json['address'] == null ? null : json['address'];
email = json['email'] == null ? null : json['email'];

但是，如果 JSON 响应中的 

error
或 
data
字段为 
null
，则可能会出现问题。您的 
ModelLoginService.fromJson
方法假定这些字段始终包含有效的 JSON 对象，因此在遇到 null 时会导致错误。

为了解决这个问题，您应该在解析 JSON 时检查每个级别的可空性。例如，在

ModelLoginService.fromJson
中，您可以修改
error
和
data
的解析：

error = json['error'] != null ? Error.fromJson(json['error']) : null;
data = json['data'] != null ? Data.fromJson(json['data']) : null;

这样，如果 JSON 中的 

error
或 
data
是 
null
，则可以将 null 分配给模型类中的相应变量，从而避免潜在的错误。

同样，在您的

Data.fromJson
方法中，您可以调整结果的解析：

results = json['results'] != null ? Results.fromJson(json['results']) : Results();

此方法可确保如果 JSON 响应的任何部分是 

null
，则模型中相应的对象也将是 
null
或默认/空对象。

无论何时使用此模型，请记住在代码中适当处理这些可为空的对象，以避免空指针异常。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.