Capacitor 6.1.x 安卓iOS端HTTP请求持续出现CORS错误求助

1. 调整WebView的跨域配置 #

针对Android和iOS分别修改原生代码，强制WebView允许目标域名的跨域请求：

Android端（MainActivity.java） #

在主活动类中重写WebViewClient，添加域名白名单和页面加载后的域名设置：

import com.getcapacitor.BridgeWebViewClient;
import com.getcapacitor.WebView;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    
    getBridge().setWebViewClient(new BridgeWebViewClient(getBridge()) {
        // 允许目标服务器的请求直接加载
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
            String targetUrl = request.getUrl().toString();
            if (targetUrl.startsWith("https://myserver.app")) {
                view.loadUrl(targetUrl);
                return true;
            }
            return super.shouldOverrideUrlLoading(view, request);
        }

        // 页面加载完成后统一设置document.domain
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            view.evaluateJavascript("document.domain = 'localhost';", null);
        }
    });
}

iOS端（AppDelegate.swift） #

通过WKUserScript在页面加载前注入脚本，修改document.domain以绕过CORS检测：

import Capacitor

override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    let bridge = CAPBridgeViewController()
    let webConfig = WKWebViewConfiguration()
    
    // 注入跨域兼容脚本
    let corsFixScript = WKUserScript(
        source: "Object.defineProperty(document, 'domain', { get: () => 'localhost', set: () => {} });",
        injectionTime: .atDocumentStart,
        forMainFrameOnly: true
    )
    webConfig.userContentController.addUserScript(corsFixScript)
    
    bridge.webViewConfiguration = webConfig
    self.window?.rootViewController = bridge
    
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}

2. 强制Axios使用原生HTTP请求 #

在Vue项目的Axios配置中，针对原生平台切换到Node.js的HTTP适配器，绕过WebView的CORS限制：

import axios from 'axios';
import { Capacitor } from '@capacitor/core';

// 创建Axios实例
const api = axios.create({
    baseURL: 'https://myserver.app'
});

// 原生平台使用HTTP适配器，Web平台保持默认
if (Capacitor.isNativePlatform()) {
    api.defaults.adapter = require('axios/lib/adapters/http');
}

export default api;

3. 检查Capacitor调试服务器配置 #

确认capacitor.config.ts中是否开启了远程调试服务器，若开启则尝试关闭，改用本地打包资源加载：

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
    appId: 'com.yourapp.id',
    appName: 'YourApp',
    webDir: 'dist',
    server: {
        // 注释掉远程调试URL，使用本地资源
        // url: "https://localhost:5173",
        cleartext: false
    }
};

export default config;

4. 临时回退到Capacitor 6.0.0版本 #

若以上方法均无效，可临时锁定Capacitor Android/iOS版本到6.0.0，执行同步后测试：

1. 修改package.json中的依赖版本：

{
    "@capacitor/android": "6.0.0",
    "@capacitor/ios": "6.0.0"
}

2. 重新同步原生项目：

npm install
npx cap sync

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