无法在 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 无关，您所要做的就是从 android 或 ios 设备/模拟器获取 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 请求的响应 [重复]