Ionic 3 iOS端CORS异常：首次启动连接ddd.com失败

我之前在Ionic 3项目里碰到过完全一样的坑！iOS首次启动时连接外部域名ddd.com总是触发CORS错误，后续启动又正常，折腾了好久才找到根源和解决方案，分享给你：

问题根源分析 #

Ionic 3在iOS上用WKWebView时，首次启动的请求Origin可能不是你以为的http://localhost:8080，而是ionic://localhost（Ionic默认的本地协议）。这就导致你服务器端配置的Allow-Control-Allow-Origin: http://localhost:8080完全不匹配，浏览器直接拦截了响应。而后续启动时，WebView的Origin会稳定为http://localhost:8080，所以你的配置就生效了。

另外，iOS的WKWebView首次启动时可能会缓存一些跨域相关的规则，也会加剧这个问题。

具体解决方案 #

1. 调整服务器端CORS配置，兼容多Origin #

把固定的Origin改成动态匹配，同时允许ionic://localhost和http://localhost:8080。以Node.js Express为例：

app.use((req, res, next) => {
  const allowedOrigins = ['http://localhost:8080', 'ionic://localhost'];
  const requestOrigin = req.headers.origin || '';
  
  // 匹配允许的Origin，生产环境建议严格控制范围
  if (allowedOrigins.includes(requestOrigin)) {
    res.setHeader('Access-Control-Allow-Origin', requestOrigin);
  }
  // 保留其他必要的CORS头
  res.setHeader('Access-Control-Allow-Credentials', 'true');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  
  // 处理OPTIONS预检请求
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  next();
});

2. 配置Ionic的WKWebView导航规则 #

在config.xml里添加允许导航到目标域名的规则，同时强制使用WKWebView：

<!-- 强制使用WKWebView -->
<preference name="WKWebViewOnly" value="true" />
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
<feature name="CDVWKWebViewEngine">
  <param name="ios-package" value="CDVWKWebViewEngine" />
</feature>

<!-- 允许导航到ddd.com的所有路径 -->
<allow-navigation href="*://ddd.com/*" />

3. 使用Ionic本地代理（开发+生产通用） #

在ionic.config.json中配置代理，让Ionic帮你转发请求，彻底绕开CORS问题：

{
  "name": "your-app-name",
  "integrations": {
    "cordova": {}
  },
  "proxies": [
    {
      "path": "/ddd-api",
      "proxyUrl": "https://ddd.com"
    }
  ]
}

之后你在代码里的请求就改成/ddd-api/xxx，而不是直接写https://ddd.com/xxx，Ionic会自动把请求转发到目标域名，完全不会有跨域问题。

4. 首次启动时清除WKWebView缓存 #

如果是缓存导致的规则残留，可以用cordova-plugin-wkwebview-clear-cache插件清除缓存：

1. 安装插件：

ionic cordova plugin add cordova-plugin-wkwebview-clear-cache

2. 在app.component.ts的启动逻辑里添加清除缓存的代码：

import { Platform } from 'ionic-angular';
declare var cordova: any;

constructor(private platform: Platform) {
  this.initializeApp();
}

initializeApp() {
  this.platform.ready().then(() => {
    // iOS平台首次启动时清除WKWebView缓存
    if (this.platform.is('ios')) {
      cordova.plugins.wkwebview.clearCache(() => {
        console.log('WKWebView缓存已清除');
      }, (err) => {
        console.error('清除缓存失败:', err);
      });
    }
  });
}

总结 #

优先试试动态CORS配置和本地代理，这两个方案基本能解决90%的场景。如果还是不行，再加上清除缓存的操作。我当时就是靠动态匹配Origin解决了首次启动的问题，后续再也没出现过CORS错误。

内容的提问来源于stack exchange，提问作者Krishna sagar