ionic4 + cordova 项目开发跨域问题

客官°小女子只卖身不卖艺 2023-07-07 14:56 9阅读 0赞

在讲我们实现跨域问题之前，我们简单的介绍下，为什么会出现跨域问题。那是因为在我们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 remove cordova cordova-plugin-ionic-webview --save

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

2.3 怎么处理跨域问题