Flutter web 跨域问题

• 转载自：https://www.jianshu.com/p/3cecb0821431

报错 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

测试通过

开发过程http访问有跨域问题，需要本地搭建代理服务器。

我的代理服务器使用dart开发：

const String LocalHost = 'localhost';
 
Future main() async {
  Cors.url.forEach((url, port){
     var server =  shelf_io.serve(
      proxyHandler(url),//url是代理的链接
      LocalHost,
      port,//port是开启的代理端口
    );

    server.then((value){
          // 添加上跨域的这几个header
      value.defaultResponseHeaders.add('Access-Control-Allow-Origin', '*');
      value.defaultResponseHeaders.add('Access-Control-Allow-Credentials', true);

      print('Serving at ${url} => port: ${port}');
    });
  });
 
}