无法在 Flutter 中运行 web api 文件

Posted

技术标签:

【中文标题】无法在 Flutter 中运行 web api 文件【英文标题】:Not able to run web api files in Flutter 【发布时间】:2022-01-09 23:15:54 【问题描述】:

我正在尝试使用 Flutter 和 mysql 构建登录页面。我已连接到数据库,但是当我尝试运行 login.php 文件时出现错误“XMLHttpRequest error”。我尝试将 http 降级到 0.13.2 版本,但它不起作用。 这是错误:-

Running with sound null safety 
Debug service listening on ws://127.0.0.1:59586/vPwdx1ozx5U=/ws
Error: XMLHttpRequest error.
    C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 908:28                get current
packages/http/src/browser_client.dart 69:22                                                                                    <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/zone.dart 1687:54                                              runUnary
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 160:18                                        handleValue
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 767:44                                        handleValueCallback
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 796:13                                        _propagateToListeners
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 593:7                                         [_complete]
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/stream_pipe.dart 61:11                                         _cancelAndValue
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/stream.dart 1232:7                                             <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 334:14  _checkAndCall
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 339:39  dcall
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/html/dart2js/html_dart2js.dart 37332:58                              <fn>


    at Object.createErrorWithStack (http://localhost:59514/dart_sdk.js:5074:12)
    at Object._rethrow (http://localhost:59514/dart_sdk.js:38925:16)
    at async._AsyncCallbackEntry.new.callback (http://localhost:59514/dart_sdk.js:38921:13)
    at Object._microtaskLoop (http://localhost:59514/dart_sdk.js:38778:13)
    at _startMicrotaskLoop (http://localhost:59514/dart_sdk.js:38784:13)
    at http://localhost:59514/dart_sdk.js:34519:9

这是我的登录页面代码:-

import 'package:flutter/material.dart';
import 'mainpg.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:fluttertoast/fluttertoast.dart';
class login1 extends StatefulWidget 
  const login1(Key? key) : super(key: key);

  @override
  _login1State createState() => _login1State();


class _login1State extends State<login1> 
  TextEditingController username = TextEditingController();
  TextEditingController password = TextEditingController();
  Future  login() async

    if(username.text == ""||password.text == "")
      
        Fluttertoast.showToast(msg: "Both fields cant be blank!",
            toastLength:Toast.LENGTH_SHORT,
            gravity: ToastGravity.CENTER,
            fontSize: 16.0,
        );
      
    else
        var url =Uri.parse('http://localhost/localconnect/login.php');
        var response = await http.post(url,headers: <String, String>
          'Content-Type': 'application/json; charset=UTF-8',
        ,
            body:jsonEncode(<String, String>
        "username":username.text,
        "password":password.text,
        ),);
        var data = json.decode(response.body);
        if(data == "success")
        Navigator.push(context,MaterialPageRoute(builder:(context)
        return const mainpage();
        ));
        
        else
        Fluttertoast.showToast(msg: "The user and Password combination does not exist!",
        toastLength:Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
        fontSize: 16.0,
        );
        
    
  
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      backgroundColor: Colors.white,
      body:SafeArea(
        child: Row(
            crossAxisAlignment:CrossAxisAlignment.start,
            children:[
              Expanded(
                flex:2,
                child: Container(
                    width:1,
                    color:Colors.white,
                    child:Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children:   [
                        const Image(
                          image: AssetImage('image/foodexpress2.jpg'),
                        ),
                        const SizedBox(height:5),
                        const Text(
                            'Food Express',
                            textDirection: TextDirection.ltr,
                            style:TextStyle(
                              decoration: TextDecoration.none,
                              fontSize:40,
                              color:Colors.red,
                              fontFamily: 'Roboto',
                              fontWeight:FontWeight.w700,
                            )
                        ),
                        const SizedBox(height:30),
                        Expanded(
                          child: Container(
                            color:Colors.grey[200],
                            child: Column(
                              children:  [
                                const Padding(
                                  padding: EdgeInsets.all(20.0),
                                  child: Text(
                                      'Login',
                                      textDirection: TextDirection.ltr,
                                      style:TextStyle(
                                        decoration: TextDecoration.none,
                                        fontSize:25,
                                        fontFamily: 'Roboto',
                                        color:Colors.redAccent,
                                        fontWeight:FontWeight.w700,
                                      )
                                  ),
                                ),
                                 Padding(
                                  padding: const EdgeInsets.only(left:25.0,right:25.0),
                                  child: TextField(
                                    controller: username,
                                    autofocus: true,
                                  //  onChanged:(value)
                                      //Username= value;
                                    //  print(Username);
                                  //  ,
                                    textAlign: TextAlign.center,
                                    cursorColor: Color(0xFFC41A38),
                                    textInputAction: TextInputAction.next,
                                    keyboardType: TextInputType.emailAddress,
                                    decoration: const InputDecoration(
                                      hintText:'Enter username',
                                      hintStyle: TextStyle(
                                        fontStyle:FontStyle.italic,
                                        color:Color(0xFF1B1F32),
                                      ),
                                      contentPadding:
                                      EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
                                      border: OutlineInputBorder(
                                        borderRadius: BorderRadius.all(Radius.circular(32.0)),
                                      ),
                                      enabledBorder: OutlineInputBorder(
                                        borderSide: BorderSide(color: Colors.blueAccent, width: 1.0),
                                        borderRadius: BorderRadius.all(Radius.circular(32.0)),
                                      ),
                                      focusedBorder: OutlineInputBorder(
                                        borderSide: BorderSide(color: Colors.blueAccent, width: 2.0),
                                        borderRadius: BorderRadius.all(Radius.circular(32.0)),
                                      ),
                                    ),
                                  ),
                                ),
                                const SizedBox(height:20),
                                  Padding(
                                  padding: const EdgeInsets.only(left:25.0,right:25.0),
                                  child: TextField(
                                    controller:password,
                                    //onChanged:(value)
                                     // Password = value;
                                    //  print(Password);
                                  //  ,
                                    autofocus:true,
                                    textAlign: TextAlign.center,
                                    obscureText: true,
                                    cursorColor: const Color(0xFFC41A38),
                                    textInputAction: TextInputAction.next,
                                    keyboardType: TextInputType.emailAddress,
                                    decoration: const InputDecoration(

                                      hintText:'Enter Password',
                                      hintStyle: TextStyle(
                                        fontStyle:FontStyle.italic,
                                        color:Color(0xFF1B1F32),
                                      ),
                                      contentPadding:
                                      EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
                                      border: OutlineInputBorder(
                                        borderRadius: BorderRadius.all(Radius.circular(32.0)),
                                      ),
                                      enabledBorder: OutlineInputBorder(
                                        borderSide: BorderSide(color: Colors.blueAccent, width: 1.0),
                                        borderRadius: BorderRadius.all(Radius.circular(32.0)),
                                      ),
                                      focusedBorder: OutlineInputBorder(
                                        borderSide: BorderSide(color: Colors.blueAccent, width: 2.0),
                                        borderRadius: BorderRadius.all(Radius.circular(32.0)),
                                      ),
                                    ),
                                  ),
                                ),
                                const SizedBox(height:20),
                                Material(
                                    elevation:5.0,
                                    color:Colors.blueAccent,
                                    borderRadius:BorderRadius.circular(30.0),
                                    child:MaterialButton(
                                        onPressed:()
                                          setState(()
                                            login();
                                          );
                                        ,
                                        minWidth:620,
                                        height:60.0,
                                        child:const Text(
                                          'Log In',
                                          style: TextStyle(
                                            color: Colors.white,
                                          ),
                                        ),
                                ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ],
                    )
                ),
              ),
              Expanded(
                flex:2,
                child: Container(
                  width: 1,
                  decoration:  const BoxDecoration(
                      image:  DecorationImage(
                        image:  AssetImage('image/food1.jpg'),
                        fit: BoxFit.fill,
                      )
                  ),
                ),
              ),
            ]
        ),
      ),
    );
  


【问题讨论】:

【参考方案1】:

据我所知,这一切都与您的基本 URL 相关,与依赖项或 dart API 无关,您所要做的就是从 androidios 设备/模拟器获取 IP 地址并通过 IP 地址访问您的本地服务器

所以尽量避免在 baseurl 中使用 localhost 然后对其进行测试并报告:)

【讨论】:

我得到同样的错误。 请用IP地址替换本地主机或将您的数据库部署到服务器,然后尝试并报告 我试着把这个“http://192.168.0.113/localconnect/login.php”给工作兄弟:( 如果我把我的IP地址输入本地主机,它会显示一个无效的url

以上是关于无法在 Flutter 中运行 web api 文件的主要内容,如果未能解决你的问题,请参考以下文章

Flutter + Chopper POST API 在网络中不起作用

为啥我的数据没有在 Flutter for web 中使用 api 从实时数据库中检索

无法从 Flutter Web 上的 localhost API(node js express)获取 http 请求的响应 [重复]

带有 Flutter web 的 localhost 无法与 docker 一起使用

无法从 Flutter Web 读取 .txt 文件

Flutter web 无法使用移动项目中的包