Flutter web 跨域问题

Flutter web 跨域问题

报错 Reterrer Policy:strict-orlgin-when-cross-origin

原因 跨域

什么是跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

当前页面url	被请求页面url	是否跨域	原因
http://www.test.com/	http://www.test.com/index.html	否	同源（协议、域名、端口号相同）
http://www.test.com/	https://www.test.com/index.html	跨域	协议不同
http://www.test.com/	http://www.baidu.com/	跨域	主域名不同（test/baidu）
http://www.test.com/	http://blog.test.com/	跨域	子域名不同（www/blog）
http://www.test.com:8080/	http://www.test.com:7001/	跨域	端口号不同（8080/7001）

解决办法

1. 安装shelf_proxy依赖库

dependencies:
  shelf_proxy: ^1.0.1

2. lib下新建proxy.dart

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

Future main() async {
  final server = await shelf_io.serve(
    proxyHandler('https://dart.cn'),
    'localhost',
    8080,
  );

  print('Proxying at http://${server.address.host}:${server.port}');
}

3. 运行服务

dart ./lib/proxy.dart

4. 将项目中的接口地址改成localhost:8080

测试通过