swiftui使用WKWebView加载自签的https服务,允许不安全访问

大家好,我的开源项目PakePlus可以将网页/Vue/React项目打包为桌面/手机应用并且小于5M只需几分钟,官网地址:pakeplus.com

这个错误是 SSL 证书验证失败 导致的(code=-1202 对应 NSURLErrorServerCertificateUntrusted),因为你的服务端 https://192.168.31.197:5173/ 使用的是自签名证书或未被 iOS 信任的证书。以下是完整的解决方案,包含证书信任配置和 WKWebView 正确实现:

Info.plist 中添加以下配置:

Swift 复制代码
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
    <key>NSAllowsLocalNetworking</key>
    <true/>
</dict>

或者更精确的配置:

Swift 复制代码
<!-- 允许非HTTPS请求(可选,若服务端后续可能切换HTTP) -->
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
    <!-- 单独允许目标IP的HTTPS请求(更安全的写法) -->
    <key>NSExceptionDomains</key>
    <dict>
        <key>192.168.31.197</key>
        <dict>
            <key>NSIncludesSubdomains</key>
            <true/>
            <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
            <true/>
            <key>NSTemporaryExceptionMinimumTLSVersion</key>
            <string>TLSv1.2</string>
        </dict>
    </dict>
</dict>

<!-- iOS 14+ 要求:允许加载本地网络资源 -->
<key>NSLocalNetworkUsageDescription</key>
<string>需要访问本地网络以加载服务端内容</string>

实现 WKWebView 并忽略 SSL 证书验证

WKWebView 默认严格验证 SSL 证书,需要通过 WKNavigationDelegate 手动忽略验证(仅用于开发环境,生产环境需使用正规证书):

Swift 复制代码
class Coordinator: NSObject, WKNavigationDelegate {
    let parent: WebView
    
    init(_ parent: WebView) {
        self.parent = parent
    }
    
    // 关键:强制信任所有SSL证书(仅开发环境!)
    func webView(_ webView: WKWebView, didReceive challenge: URLAuthenticationChallenge, completionHandler: @escaping (URLSession.AuthChallengeDisposition, URLCredential?) -> Void) {
        // 1. 检查是否是服务器信任验证
        guard challenge.protectionSpace.authenticationMethod == NSURLAuthenticationMethodServerTrust else {
            completionHandler(.performDefaultHandling, nil)
            return
        }
        
        // 2. 获取服务器信任对象
        guard let serverTrust = challenge.protectionSpace.serverTrust else {
            completionHandler(.cancelAuthenticationChallenge, nil)
            return
        }
        
        // 3. 强制信任证书(关键:忽略证书有效性检查)
        let credential = URLCredential(trust: serverTrust)
        completionHandler(.useCredential, credential)
        
        // 调试:打印证书信息,确认是否是目标服务器
        print("强制信任证书:\(challenge.protectionSpace.host):\(challenge.protectionSpace.port ?? 0)")
    }
    
    // 加载失败时打印详细错误(方便排查)
    func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error) {
        let nsError = error as NSError
        print("加载失败:")
        print("错误码:\(nsError.code)")
        print("错误描述:\(nsError.localizedDescription)")
        print("错误域名:\(nsError.domain)")
        if let failureReason = nsError.localizedFailureReason {
            print("失败原因:\(failureReason)")
        }
    }
}

大家好,我是1024小神,技术群 / 私活群 / 股票群 或 交朋友 都可以私信我。 如果你觉得本文有用,一键三连 (点赞、评论、关注),就是对我最大的支持~

相关推荐
bearpping8 小时前
Nginx 配置:alias 和 root 的区别
前端·javascript·nginx
@大迁世界8 小时前
07.React 中的 createRoot 方法是什么?它具体如何运作?
前端·javascript·react.js·前端框架·ecmascript
January12078 小时前
VBen Admin Select 选择框选中后仍然显示校验错误提示的解决方案
前端·vben
. . . . .8 小时前
前端测试框架:Vitest
前端
xiaotao1318 小时前
什么是 Tailwind CSS
前端·css·css3
战南诚9 小时前
VUE中,keep-alive组件与钩子函数的生命周期
前端·vue.js
发现一只大呆瓜9 小时前
React-彻底搞懂 Redux:从单向数据流到 useReducer 的终极抉择
前端·react.js·面试
霍理迪10 小时前
Vue的响应式和生命周期
前端·javascript·vue.js
李剑一10 小时前
别再瞎写了!Cesium 模型 360° 环绕,4 套源码全公开,项目直接用
前端