IONIC4 CORS 解决方案

一、前言

​ 我们在初期使用Ionic的过程经历了的大大小小的坑，其中与第三方应用进行传值的问题更是浪费了我们巨大的时间与精力。开发时我们在测试环境中后台Response普遍以 Access-Control-Allow-Origin:*来进行设置所以并不存在跨域的问题，一旦我们开始切换到正式环境，由于正式环境对安全控制较为严格在没有使用第三方API的情况是不允许跨域的。所以我们也不可能避免的出现了跨域的问题。

二、 各类博客以及官方解决方案

我们尝试过使用cordova-plugin-whitelist-白名单与动态代理以及原生HTTP解决方案方式结果如下：

2.1 Cordova 白名单

我们使用进行 <access origin="http://google.com" /> 进行的配置。运行->还是跨域。在这个过程中发现白名单只是允许在Cordova webview 中对外进行请求，并不解决跨域的问题，so...跨域还是存在。

2.2 Ionic 代理服务器

事实证明代理服务器只支持浏览器，并且只建议在dev模式下使用。

image-20191013093114335.png

2.3 Ionic 原生 HTTP 解决方案

如果是在没办法解决CORS的问题，直接简单粗暴的让我们替换为官方提供的HTTP原生请求库，但是项目进度下的压力下我们只好对HTTP库进行一次测试，没想到一引入HTTP原生库项目就报错了，又无形中增加了压力，只好多方案同步进行解决。

image-20191013092801019.png

三、 利用Cordova白名单配合IonicWebViewEngine进行拦截实现跨域

3.1 修改默认 Config.xml 中的 HostName 以及 Scheme

根据官方文档中了解到Config.xml 中的 HostName以及 Scheme 是可修改的，我们在这个过程中将hostName修改我们正式服务器的地址，但是Cordova 默认是不允许请求外部地址，单独修改HostName Scheme会导致页面加载不出来。
在上面说过：

我们使用进行 <access origin="http://google.com" /> 进行的配置。运行->还是跨域。在这个过程中发现白名单只是允许在Cordova webview 当中允许对外进行请求，并不解决跨域的问题，so...跨域还是存在

image.png

3.3 Cordova 白名单

根据服务器地址需要将 Navigation 按照官方实例进行调整。允许设定href 对外部进行请求。

image.png
image.png

3.4 IonicWebViewEngine 源码分析

本身 Ionic 是对Cordova进一步的封装，其IonicWebViewEngine是对 Cordova 的 SystemWebViewEngine 进行重写。在init方法中实现一个本地服务也就是 localServer。IonicWebViewEngine一旦被初始化就会解析config.xmlHostName 对进行localServer设置，默认情况下Hotname就是localhost，所以请求的origin也就是localhost 这就是引起跨域的原因。

@Override
public void init(CordovaWebView parentWebView, CordovaInterface cordova, final CordovaWebViewEngine.Client client,
                 CordovaResourceApi resourceApi, PluginManager pluginManager,
                 NativeToJsMessageQueue nativeToJsMessageQueue) {
  ConfigXmlParser parser = new ConfigXmlParser();
  parser.parse(cordova.getActivity());

  String hostname = preferences.getString("Hostname", "localhost");
  String scheme = preferences.getString("Scheme", "http");
  CDV_LOCAL_SERVER = scheme + "://" + hostname;

  localServer = new WebViewLocalServer(cordova.getActivity(), hostname, true, parser, scheme);
  localServer.hostAssets("www");

  webView.setWebViewClient(new ServerClient(this, parser));

  super.init(parentWebView, cordova, client, resourceApi, pluginManager, nativeToJsMessageQueue);
  if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    final WebSettings settings = webView.getSettings();
    int mode = preferences.getInteger("MixedContentMode", 0);
    settings.setMixedContentMode(mode);
  }
  SharedPreferences prefs = cordova.getActivity().getApplicationContext().getSharedPreferences(IonicWebView.WEBVIEW_PREFS_NAME, Activity.MODE_PRIVATE);
  String path = prefs.getString(IonicWebView.CDV_SERVER_PATH, null);
  if (!isDeployDisabled() && !isNewBinary() && path != null && !path.isEmpty()) {
    setServerBasePath(path);
  }
}

在请求发起的时候IonicWebViewEngine的shouldInterceptRequest 方法会被拦截到并且调用的localServer.shouldInterceptRequest方法，如果我们对HostName设置为我们远程服务器的域名，那我们接口在请求的过程中同样会被本地服务拦截，并且由于本地服务不存在接口路径所以会返回404。

@RequiresApi(Build.VERSION_CODES.LOLLIPOP)
@Override
public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
  return localServer.shouldInterceptRequest(request.getUrl(), request);
}

@TargetApi(Build.VERSION_CODES.KITKAT)
@Override
public WebResourceResponse shouldInterceptRequest(WebView view, String url) {
  return localServer.shouldInterceptRequest(Uri.parse(url), null);
}

另外在上边的代码可以看到IonicWebViewEngine的shouldInterceptRequest 方法返回时一个WebResourceResponse，根据 uriMatcher.match(uri); 匹配 Hostname等 如果handler不为空，那么就调用handleLocalRequest 方法内部实现的本地 WebResourceResponse 进行返回，我们要做就是改造if (handler == null) 判断进来的Uri 对其进行拦截让它 return null; 由WebView自行解决。

/**
 * Attempt to retrieve the WebResourceResponse associated with the given <code>request</code>.
 * This method should be invoked from within
 * {@link android.webkit.WebViewClient#shouldInterceptRequest(android.webkit.WebView,
 * android.webkit.WebResourceRequest)}.
 *
 * @param uri the request Uri to process.
 * @return a response if the request URL had a matching handler, null if no handler was found.
 */
public WebResourceResponse shouldInterceptRequest(Uri uri, WebResourceRequest request) {
  PathHandler handler;
  synchronized (uriMatcher) {
    handler = (PathHandler) uriMatcher.match(uri);
  }
    if (handler == null) {
      return null;
  }
  if (isLocalFile(uri) || uri.getAuthority().equals(this.authority)) {
    Log.d("SERVER", "Handling local request: " + uri.toString());
    return handleLocalRequest(uri, handler, request);
  } else {
    return handleProxyRequest(uri, handler);
  }
}

uriMatcher的注册应该是由JS代码调用 register 将所有规则/或资源都添加到uriMatcher中。

/**
 * Registers a handler for the given <code>uri</code>. The <code>handler</code> will be invoked
 * every time the <code>shouldInterceptRequest</code> method of the instance is called with
 * a matching <code>uri</code>.
 *
 * @param uri     the uri to use the handler for. The scheme and authority (domain) will be matched
 *                exactly. The path may contain a '*' element which will match a single element of
 *                a path (so a handler registered for /a/* will be invoked for /a/b and /a/c.html
 *                but not for /a/b/b) or the '**' element which will match any number of path
 *                elements.
 * @param handler the handler to use for the uri.
 */
void register(Uri uri, PathHandler handler) {
  synchronized (uriMatcher) {
    uriMatcher.addURI(uri.getScheme(), uri.getAuthority(), uri.getPath(), handler);
  }
}