Flutter Web部署至真实主机后API访问失败求助

问题背景 #

用Flutter开发的网站在本地服务器运行正常，部署到真实主机后登录功能无法正常工作，始终报错无法访问API。

相关代码 #

Flutter网络请求代码 #

import 'package:http/http.dart' as http;
import 'dart:convert';

String _basicAuth = 'Basic${base64Encode(utf8.encode('sued:suady'))}';

Map<String, String> myheaders = {'authorization': _basicAuth};

class Crud {
  getRequest(String url) async {
    try {
      var response = await http.get(Uri.parse(url));
      if (response.statusCode == 200 || response.statusCode == 201) {
        var responsebody = jsonDecode(response.body);
        return responsebody;
      } else {}
      // ignore: empty_catches
    } catch (e) {}
  }

  postRequest(String url, Map data) async {
    try {
      var response =
          await http.post(Uri.parse(url), body: data, headers: myheaders);
      if (response.statusCode == 200 || response.statusCode == 201) {
        var responsebody = jsonDecode(response.body);
        return responsebody;
      } else {}
      // ignore: empty_catches
    } catch (e) {}
  }
}

PHP数据库连接代码（connect.php） #

<?php

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, DELETE, PUT");
header("Access-Control-Allow-Headers: Content-Type, Authorization");

if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    http_response_code(204);
    exit();
}

$dsn = "mysql:host=localhost;dbname=id55555067_sirte";
$user = "id2555567_sijhveun";
$pass = "s!rtunD6";
$option = array(
   PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES UTF8"
);
$countrowinpage = 9;

try {
   $con = new PDO($dsn, $user, $pass, $option);
   $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
   
   // Enable CORS
   header("Access-Control-Allow-Origin: *");
   header("Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With");
   header("Access-Control-Allow-Methods: POST, GET, OPTIONS");

   // Handle preflight requests
   if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
       http_response_code(200);
       exit;
   }

   include "functions.php";
    
} catch (PDOException $e) {
   echo $e->getMessage();
}

PHP登录接口代码（login.php） #

<?php 
 
  include "../connect.php" ; 
 
  $email = filterRequest("email");

  $pass  = filterRequest("pass");

  $stmt = $con->prepare("SELECT * FROM `admin` WHERE `pass` = ? AND email = ? "); 

  $stmt->execute(array( $pass , $email )) ;

  $data = $stmt->fetch(PDO::FETCH_ASSOC) ; 

  $count = $stmt->rowCount() ; 

  if ($count > 0) {

    echo json_encode(array("status" => "success" , "data" => $data)) ; 

  }else {

    echo json_encode(array("status" => "fail")) ; 

  }

报错信息 #

Error Catch FormatException: //sirte-un-db.000webhostapp.com/mydatabase/auth/login.php AAA
Error
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 296:3       throw_
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 893:3   defaultNoSuchMethod
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 866:5   noSuchMethod
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 318:12  callNSM
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 329:25  _checkAndCall
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 494:10  callMethod
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 498:5   dsend
packages/enter_sirte_university/custom/login_screen/form/custom_login.dart 49:19  login
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 163:18                                        handleValue
dart-sdk/lib/async/future_impl.dart 847:44                                        handleValueCallback
dart-sdk/lib/async/future_impl.dart 876:13                                        _propagateToListeners
dart-sdk/lib/async/future_impl.dart 652:5                                         [_completeWithValue]
dart-sdk/lib/async/future_impl.dart 722: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>

依赖配置 #

dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.6


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  awesome_dialog: ^3.2.0
  http: ^1.1.0
  hive: ^2.0.4
  hive_flutter: ^1.1.0
  dartz: ^0.10.1
  shared_preferences: ^2.0.13

排查与修复步骤 #

1. 修复URL格式问题
   报错显示请求URL为//sirte-un-db.000webhostapp.com/mydatabase/auth/login.php，缺少https://前缀，导致Uri.parse解析失败抛出FormatException。必须确保请求的URL是完整的，比如改为https://sirte-un-db.000webhostapp.com/mydatabase/auth/login.php。

2. 修正Basic Auth格式
   Flutter代码中_basicAuth的写法错误，Basic和编码后的凭证之间需要加空格，正确写法：

   String _basicAuth = 'Basic ${base64Encode(utf8.encode('sued:suady'))}';
   

   缺少空格会导致后端无法正确识别Authorization头，进而拒绝请求。

3. 优化异常捕获逻辑
   Crud类中的catch块为空，无法获取具体错误信息，建议修改为打印错误，方便调试：

   catch (e) {
     print('请求错误: $e');
     return e;
   }
   

4. 清理重复的CORS配置
   connect.php中重复设置了CORS头和OPTIONS请求处理，保留一份即可，避免冲突：

   <?php
   // 只保留一次CORS配置
   header("Access-Control-Allow-Origin: *");
   header("Access-Control-Allow-Methods: GET, POST, OPTIONS, DELETE, PUT");
   header("Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With");
   
   if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
       http_response_code(204);
       exit();
   }
   
   // 后续数据库连接代码...
   

5. 验证数据库连接信息
   确认000webhost提供的数据库主机地址是否为localhost，部分虚拟主机的数据库主机是独立地址，同时核对用户名、密码、数据库名称是否完全正确。

6. 检查请求参数传递
   确认前端post请求传递的email和pass参数名称与后端filterRequest获取的一致，且参数值正确编码。

内容的提问来源于stack exchange，提问作者Ahmed v