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

68de4m5k  于 5个月前  发布在  Flutter
关注(0)|答案(3)|浏览(65)

我的问题
最后，我发现我的项目中的错误与空变量无关，与Flutter Web项目上的XMLHttpRequest（CORS）有关，我认为与空变量有关。
我的Json：

{
    "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;
  }
}

型
我的服务Get 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中的nullable类型，并期望这个问题不会发生，但我找不到解决它的最佳方法

dart

3条答案

按热度按时间
roejwanj

roejwanj1#

这是阻止Web Flutter中API调用的主要问题。所以我终于在搜索中找到了答案，并在我的主题中设置了答案
每个flutter web上的XMLHttpRequest（CORS）异常

我花了时间在这上面做了研究。问题就在那里，需要强调。很多人都面临这个问题，在谷歌上做一次搜索就可以验证它，而且在Flutter中没有直接的解决方案。
CORS问题只有当我是API的开发者时才能解决。我可以向它或服务器添加CORS配置，它在Flutter Web中工作正常，但在使用第三方API时，它会不断给出无法解决的错误。我已经尝试了多个公开可用的API。
我发现的唯一方法是制作第三方API的中间件API，向其添加CORS配置，然后在Flutter Web中使用它，但不是所有这些过程，Flutter Web不应该直接能够管理所有这些麻烦吗？

赞(0）分享  回复(0）举报  5个月前
m2xkgtsf

m2xkgtsf2#

使用此可选模型而不是必需模型，但始终建议使用JSON的数据部分并获取。检查成功或状态代码
导入“dart：转换”;

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）分享  回复(0）举报  5个月前
wljmcqd8

wljmcqd83#

您的JSON响应似乎有一些可空字段，例如address和email。当将这些字段Map到模型时，您需要考虑这些字段在JSON中可能是null的可能性。
在你的User.fromJson方法中，你已经在处理像address和email这样的可空字段的转换，检查它们在JSON中是否为空，并相应地分配它们：

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;

型
这样，如果error或data在JSON中是null，则将null赋给模型类中的相应变量，以避免潜在的错误。
类似地，在Data.fromJson方法中，可以调整结果的解析：

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

型
这种方法可以确保，如果JSON响应的任何部分是null，模型中对应的对象也将是null或默认/空对象。
请记住，无论您在何处使用此模型，都要在代码中适当地处理这些可空对象，以避免空指针异常。

赞(0）分享  回复(0）举报  5个月前
我来回答

相关问题

    查看更多
    微信公众号

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com