iOS 11.3下Cordova通过localhost替代file://服务应用的插件问题

我之前折腾过类似的需求，针对iOS 11.3上Cordova要弃用file://改用localhost的问题，给你梳理几个靠谱的解决办法：

一、正确配置cordova-plugin-wkwebview-engine #

你之前用这个插件的思路是对的，但可能配置不全导致没生效。按下面步骤来：

1. 先确保插件安装到位（如果之前装过可以先卸载重装）：

   cordova plugin remove cordova-plugin-wkwebview-engine
   cordova plugin add cordova-plugin-wkwebview-engine
   

2. 在config.xml里添加完整的配置项：

   <!-- 强制使用WKWebView，不 fallback 到UIWebView -->
   <preference name="WKWebViewOnly" value="true" />
   <!-- 指定本地服务的主机名和端口 -->
   <preference name="Hostname" value="localhost" />
   <preference name="Port" value="8080" />
   <!-- 把内容源指向本地服务地址 -->
   <content src="http://localhost:8080/index.html" />
   

   这样配置后，Cordova会自动启动一个本地HTTP服务器，把你的www目录下的资源通过localhost:8080提供，完美替代file://。

二、用活跃维护的本地Web服务器插件替代cordova-httpd #

cordova-httpd确实已经停更很久了，仓库失效很正常。推荐用cordova-plugin-local-webserver，这个插件一直在维护，兼容性更好：

1. 安装插件：

   cordova plugin add cordova-plugin-local-webserver
   

2. 修改config.xml的内容源为空白页，避免初始加载file://：

   <content src="about:blank" />
   

3. 在deviceready事件中启动本地服务并跳转：

   document.addEventListener('deviceready', function() {
     // 启动本地Web服务，根目录指向www文件夹
     window.LocalWebServer.start({
       port: 8080,
       root: 'www'
     }, function(serverUrl) {
       // 成功启动后跳转到localhost地址
       window.location.href = serverUrl + '/index.html';
     }, function(error) {
       console.error('启动本地服务失败：', error);
     });
   }, false);
   

注意事项 #

• iOS 11.3对file://协议的限制很多，比如无法正常加载部分本地资源、跨域问题等，用localhost的HTTP服务能彻底避开这些坑。
• 如果用WKWebView方案，记得检查你的Cordova版本，建议用8.0以上的版本，兼容性更好。

内容的提问来源于stack exchange，提问作者3Dos