Flutter 跨平台开发之路七 跨域访问

一.什么是跨域访问

跨域：源于1995年由Netscape公司提出的同源策略，以前是没有跨域不跨域的说法，后来发现有人做假网站，这个假网站记录用户的输入，然后拿用户的输入去真的网站请求数据。这样假网站能拿到用户输入，又能拿到真网站返回的数据。为了阻止这样情况就提出了同源策略（同一个域名，同一协议，同一端口才能访问），所以前端网页不能直接访问第三方服务器，因为 js 或浏览器拦截了。随着同源策略的出现，那就切断了真正需要访问第三网站的需求，为了解决访问第三网站这种跨域需求问题，提出了各种各样的技术方案。

二.大概分为三种类型：

1.jsonp 兼容好（老的环境和浏览器会用，前端要用jsonp请求，后端要支持jsonp，也就是前后端都要改），利用的就是script的src标签没有跨域限制来实现的，容易被访问返回的结果攻击

2.CORS 跨域资源共享 （前端不需要做任何改变），最好是填那些网站域名可以访问本服务器，而不是用*号，同样的最好不要允许携带cookie因为可能会暴露机密数据

3.最正确的方式是用一台或多台服务器proxy（前端不需要做任何改变），前端通过加密的方式跟自已的服务器群连接，再由自已的服务器代理去访问第三方。

三.dart代码：

import 'package:dio/dio.dart';

class JsonpInterceptor extends Interceptor {
  @override
  void onRequest(RequestOptions options, RequestInterceptorHandler handler) {
    // 如果请求的是 JSONP 接口
      // 添加 callback 参数
      options.queryParameters['callback'] = 'jsonpCallback';//这里的jsonpCallback需要服务端支持
    super.onRequest(options, handler);
  }

  @override
  void onResponse(Response response, ResponseInterceptorHandler handler) {
    // 如果请求的是 JSONP 接口
      // 对响应数据进行处理，例如通过正则表达式提取 JSON 数据
      // 这里需要根据实际的 JSONP 响应格式来编写正则表达式
      final jsonpBody = RegExp(r'jsonpCallback\((.*?)\)').firstMatch(response.data)?.group(1);
      if (jsonpBody != null) {
        // 更新 response 的数据
        response.data = jsonpBody;
      }
    super.onResponse(response, handler);
  }
}

Future FetchData(url) async {
  print(".....FetchData请求url:"+url);
  final dio = Dio();
  // dio.interceptors.add(JsonpInterceptor());
  //
  final response = await dio.get(url);
  if (response.statusCode == 200) {
    // 请求成功
    print('请求成功: ${response.statusCode}');
  } else {
    // 请求失败
    print('请求失败: ${response.statusCode}');
  }
  return response.data;
}

四.flutter的跨域访问：

由于flutter是跨平台开发，所以跨域访问分为原生平台访问和h5平台访问。最好是用dio库来访问，因为dio帮助大家作了平台访问的封装，虽然还有些问题。
1.原生平台跨域访问第三方网站
http访问：不受跨域限制，也就是第三方网站不用CORS 跨域资源共享，如果第三方网站只支持http访问需要android:usesCleartextTraffic=“true”（允许所有的http请求，因为不支持https会降级为http明文访问）
https访问：不受跨域限制，也就是第三方网站不用CORS 跨域资源共享

2.h5平台跨域访问第三方网站
http访问：受跨域限制，也就是需要跨域技术方案
https访问：受跨域限制，也就是需要跨域技术方案