基于ios系统ionic 项目开发跨域问题

     在讲我们实现跨域问题之前，我们简单的介绍下，为什么会出现跨域问题。那是因为在我们ios 的系统中存在两个网页浏览器，一个是UIWebView，一个是WKWebView,在以前ionic 构建的时候默认使用的是UIWebView,而这个网页浏览器并没有强制的实施了CORS。但是那是以前，而现在所构建的ionic的项目，都默认使用WKWebView。这个家伙呢，强制实施了CORS。当我们新建项目，把以前代码导过来的时候，发现所有请求都发不了。打开xcode 控制台，你会发现所有请求都会出现如下错误信息。 

{"headers":{"normalizedNames":{},"lazyUpdate":null,"headers":{}},"status":0,"statusText":"Unknown Error","url":null,"ok":false,"name":"HttpErrorResponse","message":"Http failure response for (unknown url): 0 Unknown Error","error":{"isTrusted":true}}

    你会发现，你什么都没改，在chrome浏览器可以正常访问，到真机上就出现该错误。其实，这个都是因为ionic 在构建项目加入平台的时候，已经帮你加上了cordova-plugin-ionic-webview 插件。如果有些道友，不小心把该插件删除，再次打包到真机上，发现又可以正常访问。以为解决了问题，其实则不然，打开项目之后，你会发现页面的头部竟然能够拉下来，尤其在上拉加载，下拉刷新的时候尤其明显。表面上解决了问题，却给了用户极差的app使用体验。为什么会这样呢，因为你删除了cordova-plugin-ionic-webview插件，当页面渲染默认使用UIWebView,这就造成了页面渲染的问题。那使用WKWebView渲染页面有什么好处呢？  

• 运行速度更快
• 改进的渲染性能
• 更少的内存消耗
• 优化了滚动事件（对虚拟列表很重要）

 那遇到这样的问题怎么解决呢？我们查阅官网，官网给我们提示的解决方案有两种：

1.默认使用UIWebView

    1.1 方法：移除cordova-plugin-ionic-webview 插件    

$ ionic cordova plugin remove cordova cordova-plugin-ionic-webview --save

       1.2 或者在项目中强制使用UIWebView，在config.xml中配置

如果app的体验没什么要求，那完全可以这样搞。但在现实开发中肯定是不可取的。

2.使用WKWebView 

   2.1 安装命令，如果没有安装的话，可以使用如下命令安装 

$ ionic cordova plugin add cordova cordova-plugin-ionic-webview --save

    2.2 配置WKWebView，保证使用的是WKWebView来渲染页面，在config.xml中配置

    2.3 怎么处理跨域问题

    2.3.1 方案一：要求后台接口（api）全部支持跨域。

    2.3.2 方案二：使用ionic 自己的native http 发送请求。因为这是基于native的可以绕过跨域问题。

  2.4 产生了新的问题 

     2.4.1 如果使用了native 插件这将给我们的调试带来很大的麻烦，测试一个请求，我们还要打包到真机上运行测试，太影响开发效率。

     2.4.2 我们可以将它与@angular/common/http 来回切换

           当我们使用浏览器的时候我们使用@angular/common/http 来模拟发送请求，当我们使用真机的时候，使用native http来发送请求。这也间接的解决了我们问题。根据什么来判断，最简单的就是根据设备平台，判断出是真机还是浏览器。那我们ionic中正好有款插件能够满足，device。

     2.4.3 注意在使用native http 发送post和put的请求时候，需要设置他们的序列化名字        

setDataSerializer(serializer)

        到此为止，完美解决了使用WKWebView 给我们带来的跨域困扰，希望对你们有些帮助。