网站可以在 Safari 中运行，但不能在 Xcode 中运行 WKWebView

Question

我正在使用 Swift 为 iOS 构建一个非常简单的应用程序。我正在运行 Xcode 13，这是适用于 Mac Big Sur 的最新版本。它只是使用 WKWebView 来加载我的网站。我的网站在 Safari 中运行完美，但在带有 WKWebView 的 iPhone 模拟器中无法运行。

我的网站是使用 Telerik 的 Blazor 服务器端网站。错误消息不清楚，但似乎没有加载 Telerik 或 Blazor 服务器 js 文件。它说找不到“TelerikBlazor”。我的代码中确实启用了 JavaScript。

我尝试通过 Visual Studio 中的开发隧道将 Mac 连接到 PC，但收到“不允许请求资源”错误，因此无法调试它。但同样，它在 Safari 中运行得很好。我还尝试将 Maui 项目中的 iPhone 模拟器连接到我的 Mac，但它找不到 Xcode，我猜是因为它是一台较旧的 Mac。

Answer 1

您遇到的 Blazor Server 网站无法在 WKWebView 中运行而在 iOS 上的 Safari 中正常运行的问题可能是由于以下几个潜在原因造成的：

可能原因及解决方案

1. 应用程序传输安全（ATS）

说明： ATS 是一项 iOS 安全功能，要求应用程序通过符合安全标准的 HTTPS 与服务器进行通信。

解决方案：

• 确保您的网站具有有效的 SSL 证书并使用 HTTPS。
• 如果您需要临时例外进行开发，请修改应用程序的

  Info.plist

  以包含 ATS 例外（不建议用于生产）。

2. 内容安全策略（CSP）

说明： CSP 标头控制浏览器可以加载哪些资源。您的 Blazor 网站可能有限制性 CSP，阻止 WKWebView 加载某些脚本或资源。

解决方案：

• 检查服务器的 CSP 标头。确保它们允许从您网站的来源加载 Telerik 和 Blazor 所需的脚本和资源。

3. JavaScript 评估时机

解释： WKWebView 可能会在加载必要的 DOM 元素之前尝试执行 JavaScript。

解决方案：

• 页面完全加载后，使用

  WKUserScriptInjectionTime.atDocumentEnd

  注入 JavaScript 代码。

4. CORS（跨源资源共享）：

说明： 如果您的 Blazor 网站和开发服务器位于不同的源（域、端口或协议），您可能会遇到 CORS 问题。

解决方案：

• 配置您的 Blazor 服务器以允许来自开发环境来源的请求。

5. WebView配置：

说明： 仔细检查您是否在 WKWebView 配置中启用了 JavaScript。

解决方案：

• 确保 WKWebView 配置中有以下内容：

---

 let config = WKWebViewConfiguration()
 config.preferences.javaScriptEnabled = true 
 let webView = WKWebView(frame: .zero, configuration: config)

---

调试技巧：

远程调试：

• 虽然您在通过 Visual Studio 进行远程调试时遇到困难，但请尝试使用 Safari 的 Web Inspector 远程调试在 iOS 模拟器中运行的网站。

控制台日志：

• 将控制台日志添加到 Blazor 代码中以跟踪执行流程并识别潜在错误。

---

import UIKit
import WebKit

class ViewController: UIViewController, WKNavigationDelegate {

    var webView: WKWebView!

    override func loadView() {
        let config = WKWebViewConfiguration()
        config.preferences.javaScriptEnabled = true
        webView = WKWebView(frame: .zero, configuration: config)
        webView.navigationDelegate = self
        view = webView
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        let myURL = URL(string:"https://www.yourwebsite.com")
        let myRequest = URLRequest(url: myURL!)
        webView.load(myRequest)
    }
}

---

特定于问题的文档来源。

• 应用程序传输安全（ATS）
  • Apple 开发者文档：防止不安全的网络连接
• 内容安全策略（CSP）
  • Mozilla 开发者网络 (MDN)：内容安全策略 (CSP)
• JavaScript 评估时机
  • Apple 开发者文档：WKUserScript
• CORS（跨域资源共享）
  • Mozilla 开发者网络 (MDN)：跨源资源共享 (CORS)
• WebView配置
  • Apple 开发者文档：WKWebView
• Blazor 服务器和 WebAssembly 与 Telerik
  • 用于 Blazor 文档的 Telerik UI ：用于 Blazor 文档的 Telerik UI
• ios_MyGuard
• WKWebView 示例
• WebKit