Flutter + Chopper POST API not working in web

Question

I am completely new to flutter. While learning flutter I am not able to login with flutter web application same code is working fine with the android mobile app.

Please find the below log info. The same call is working on all platforms except flutter web

INFO: 2020-05-22 17:40:48.229: curl -v -X POST -H 'content-type: application/json; charset=UTF-8' -H 'Accept: /' -H 'Cache-Control: no-cache' -H 'Connection: keep-alive' -d '{"username":"admin","password":"admin@123"}' http://healthvedic.in/api/admin/user/login.php

The expected value of type 'String', but got one of type 'ClientException'

import 'package:chopper/chopper.dart';

part 'chopper_network_manager.chopper.dart';

@ChopperApi(baseUrl: '')
abstract class ChopperNetworkManager extends ChopperService {
  static ChopperNetworkManager manager;

  @Post(path: 'admin/user/login.php')
  Future<Response> doLogin(@Body() Map<String, dynamic> body);

  static var customHeaders = {
    'content-type': 'application/json; charset=UTF-8',
    'Accept': '*/*',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive',
  };

  static ChopperNetworkManager create() {
    final client = ChopperClient(
        baseUrl: 'http://healthvedic.in/api/',
        services: [
          _$ChopperNetworkManager(),
        ],
        converter: JsonConverter(),
        interceptors: [
          HeadersInterceptor(customHeaders),
          CurlInterceptor(),
        ]);
    return _$ChopperNetworkManager(client);
  }

  static ChopperNetworkManager getInstance() {
    if (manager == null) {
      manager = ChopperNetworkManager.create();
      return manager;
    }
    return manager;
  }
}

Calling Place

 void doLogin() async {
LoginReqModel reqModel = LoginReqModel(
    username: userNameController.text, password: passwordController.text);
var res = ChopperNetworkManager.getInstance().doLogin(reqModel.toJson());
res.then(
    (value) => {
          updateOnUI(LoginResModel.fromJson(value.body)),
        }, onError: (e) {
  onError(e);
}).catchError(onError, test: (error) => onError(error));
res.catchError(onError(''));

}

Below are the headers in PHP Rest-API

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With, Access-Control-Allow-Origin");
header("Content-Type: application/json; charset=UTF-8");
header("Access-Control-Allow-Methods: POST, OPTIONS");

could you share some code snippets like the line or function where the exception is raised — Shubham Tanwar, May 22 '20 at 12:37
Thanks for the response @ShubhamTanwar: I have updated code. Please check, let me know if any information required. — Raja Peela, May 22 '20 at 13:26
Could you please highlight line at which this exception is thrown — Shubham Tanwar, May 22 '20 at 13:54
on error I am getting the error log: res.then( (value) => { updateOnUI(LoginResModel.fromJson(value.body)), }, onError: (e) { — Raja Peela, May 22 '20 at 14:58
You should probably inspect the `ClientException` and see what it tells you. The underlying http client is different on web and on native so there could be some different handling. — kuhnroyal, May 22 '20 at 18:35
Try to print the exception object somewhere and see the log. Usually a console log will be available if in the browser. Check it if you can find one. Usually CORS errors are what you will see in browsers. — Abhilash Chandran, May 23 '20 at 08:41
I understand this is a CORS issue but in API side Access-Control-Allow-Origin: * is there still I am facing the issue. — Raja Peela, May 26 '20 at 15:51
@kuhnroyal: As you said please suggest some handling samples to resolve this. — Raja Peela, Jan 27 '21 at 11:43

score 0 · Answer 1 · answered Apr 21 '21 at 16:25

I'm unable to run the code that you've provided, but the error given is pretty clear: The expected value of type 'String', but got one of type 'ClientException'. As mentioned in the error, it expects a 'String' but an Exception was thrown instead.

On the comments, you've mentioned that the line causing the issue was

res.then((value) => { 
    updateOnUI(LoginResModel.fromJson(value.body)), 
}

Since the app works fine in Android but not on Web, I suggest checking the request being made in LoginResModel and see why a ClientException was thrown. Adding a try-catch block may also help.

try {
    // line causing the issue
} catch (error){
    debugPrint('Error: $error');
}

I'm curious on why ClientException is being thrown from ChopperNetworkManager.getInstance().doLogin(reqModel.toJson()), perhaps you can catch the Exception inside doLogin() and identify its cause.

Flutter + Chopper POST API not working in web

1 Answers1

Linked