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） |
解决办法
- 安装shelf_proxy依赖库
dependencies:
shelf_proxy: ^1.0.1
- lib下新建proxy.dart
import 'package:shelf/shelf_io.dart' as shelf_io;
import 'package:shelf_proxy/shelf_proxy.dart';
Future<void> main() async {
final server = await shelf_io.serve(
proxyHandler('https://dart.cn'),
'localhost',
8080,
);
print('Proxying at http://${server.address.host}:${server.port}');
}
- 运行服务
dart ./lib/proxy.dart
- 将项目中的接口地址改成localhost:8080
