Flutter for Web solves cross-domain problems, supports browser local operation and packaged deployment to the web server

There is basically no problem with the static page of Flutter for Web running, but when the interface is added to adjust the data, it encounters a browser cross-domain problem.

Cross-domain problem 1: CROS

Solution:
There are three solutions:
A. Install the browser extension plug-in moesif-orign-cors-changer (simple configuration of a few data)
B. Configure Nginx (too many configurations)
C. Use the shelf_proxy plug-
in My choice of option
1 .Integrate the plugin in the project's pubspec.yaml:

dependencies:
  shelf_proxy: ^1.0.1

2. Add a file in the lib directory of the project 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. Enter in the terminal command line of AS: dart ./lib/proxy_config.dart
the local proxy server is started!

4. Then you can run the web app, enter the command:flutter run -d chrome

Cross-domain issue 2: browser security settings

However, you will find that CROS has not been resolved, and the web still cannot run because of the security settings of Google Chrome.
solution:

1. Go to flutter\bin\cache and delete the file flutter_tools.stamp
2. Go to flutter\packages\flutter_tools\lib\src\web to find and open the file chrome.dart
3. Search to find '–disable-extensions'
4. In it Add a line below '–disable-web-security'

web compatible exception handling

At this point, most of the students' projects can run, but - my project still reports an error:Error: Unsupported operation: bool.fromEnvironment can only be used as a const constructor

It is this line of code found in the project that causes the web error to fail to run:

  static bool get isRelease => bool.fromEnvironment("dart.vm.product");

Solution:
replace bool.fromEnvironment with kReleaseMode

  import 'package:flutter/foundation.dart';
  
  static bool get isRelease => kReleaseMode;

The retrofit library cannot make network requests

1. flutter build webAfter the release package is published to the server, the network request cannot be made, but the profile or debug package is normal.
2. Without retrofit, directly using dio can be released and packaged normally and the data can be obtained normally.
Conclusion: The code of the retrofit library was confused when it was released and packaged, making it unable to work.

Solution:
Because I haven't found a way to specify a certain plug-in not to confuse when flutter web is packaged, I have already raised issues to the author, and I hope the author can solve it as soon as possible. For the time being, we can only abandon the retrofit library and use dio back.

Attach the command to make the profile package:

flutter build web --profile --dart-define=Dart2jsOptimization=O0

Deploy to the web

Packages generated with the command can be viewed in the project's /build/web directory.
When you are ready to deploy the application, upload the release package to the cloud or similar service