flutter web端解决跨域问题

2022-09-22

Flutter Web端解决跨域问题

1.当我们开发的flutter程序在ios和安卓上都运行正常时，开启web端测试。结果:

从图上我们观察到了跨域错误。

解决方法：

1.引入代理包

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  flutter_swiper_null_safety: ^1.0.2
  flutter_screenutil: 5.0.0+2
  dio: ^4.0.6
  # 引入代理类
  shelf_proxy: ^1.0.1

2.在lib目录下创建server package，添加代码

import 'package:shelf/shelf_io.dart' as shelf_io;
import 'package:shelf_proxy/shelf_proxy.dart';

void main() async {
  var server = await shelf_io.serve(
    proxyHandler("https://xxxxxxx"),
    '192.168.1.8',
    7777,
  );
  // 这里设置请求策略，允许所有
  server.defaultResponseHeaders.add('Access-Control-Allow-Origin', '*');
  server.defaultResponseHeaders.add('Access-Control-Allow-Credentials', true);
  print('Proxying at http://${server.address.host}:${server.port}');
}

3.修改Request类的baseUrl

import 'package:dio/dio.dart';

class Request {
  static String domain = "http://192.168.1.8:7777/";
  static var options = BaseOptions(
    baseUrl: '${domain}api',
    // connectTimeout: 5000,
    receiveTimeout: 5000,
  );

  static Dio cli() {
    return Dio(options);
  }
}