Flutter for Web の静的ページの実行には基本的に問題はありませんが、データを調整するためにインターフェイスを追加すると、ブラウザーのクロスドメインの問題が発生します。
クロスドメインの問題 1: CROS
解決策:
解決策は 3 つあります。
A. ブラウザ拡張プラグイン moesif-orign-cors-changer をインストールします (少数のデータの単純な構成)
B. Nginx を構成します (構成が多すぎます)
C.shelf_proxy プラグインを使用します。
私の選択オプション
1 のプラグインをプロジェクトに統合しますpubspec.yaml。
dependencies:
shelf_proxy: ^1.0.1
2. プロジェクトの lib ディレクトリにファイルを追加しますproxy_config.dart。
import 'package:shelf/shelf_io.dart' as shelf_io;
import 'package:shelf_proxy/shelf_proxy.dart';
Future<void> main() async {
/// 输入你想要请求的api网关
var reqHandle = proxyHandler("http://192.168.2.29:8081");
/// 绑定本地端口，4500，转发到真正的服务器中
var server = await shelf_io.serve(reqHandle, 'localhost', 4500);
// 这里设置请求策略，允许所有
server.defaultResponseHeaders.add('Access-Control-Allow-Origin', '*');
server.defaultResponseHeaders.add('Access-Control-Allow-Credentials', true);
print('Serving at http://${
server.address.host}:${
server.port}');
}
3. AS のターミナル コマンド ラインに「dart ./lib/proxy_config.dart
ローカル プロキシ サーバーが開始されました!」と入力します。
4. 次に、Web アプリを実行できるようになり、次のコマンドを入力します。flutter run -d chrome
クロスドメインの問題 2: ブラウザーのセキュリティ設定
ただし、CROS は解決されておらず、Google Chrome のセキュリティ設定が原因で Web は依然として実行できないことがわかります。
解決：
1. flutter\bin\cache に移動して、flutter_tools.stamp ファイルを削除します。
2. flutter\packages\flutter_tools\lib\src\web に移動して、chrome.dart ファイルを見つけて開きます。
3. 「–disable-extensions」を検索して見つけます。 '
4. その中の「-disable-web-security」の下に行を追加します
Web 互換の例外処理
この時点で、学生のプロジェクトのほとんどは実行できますが、私のプロジェクトではまだエラーが報告されます。Error: Unsupported operation: bool.fromEnvironment can only be used as a const constructor
Web エラーの実行失敗の原因は、プロジェクト内で見つかった次のコード行です。
static bool get isRelease => bool.fromEnvironment("dart.vm.product");
解決策:
bool.fromEnvironment を kReleaseMode に置き換えます。
import 'package:flutter/foundation.dart';
static bool get isRelease => kReleaseMode;
レトロフィット ライブラリはネットワーク リクエストを行うことができません
1.flutter build webリリース パッケージがサーバーに公開された後、ネットワーク リクエストを行うことはできませんが、プロファイルまたはデバッグ パッケージは正常です。
2. 改造なしで、dio を直接使用すると、正常にリリースおよびパッケージ化でき、データも正常に取得できます。
結論: レトロフィット ライブラリのコードは、リリースおよびパッケージ化されたときに混乱しており、機能しませんでした。
解決策:
Flutter Web をパッケージ化するときに混乱しないように特定のプラグインを指定する方法が見つからなかったので、作成者に問題を提起しました。作成者ができるだけ早く解決できることを願っています。当面は後付けライブラリを放棄して dio バックを使用するしかありません。
コマンドを添付してプロファイル パッケージを作成します。
flutter build web --profile --dart-define=Dart2jsOptimization=O0
Web に展開する
このコマンドで生成されたパッケージは、プロジェクトの /build/web ディレクトリで表示できます。
アプリケーションをデプロイする準備ができたら、リリース パッケージをクラウドまたは同様のサービスにアップロードします。