WKWebView因Authorization无法加载资源，求全局请求头设置方法

你遇到的问题很典型——WKWebView不会自动将主请求的HTTP头继承给页面内的子资源请求（比如CSS、JS、图片等），所以你的主页面能加载，但依赖的CSS因为缺少Authorization头被服务器拒绝了。下面是一个可靠的解决方案，通过拦截所有请求来全局添加所需的请求头：

步骤1：设置WKNavigationDelegate #

首先，让你的视图控制器遵守WKNavigationDelegate协议，并将WKWebView的navigationDelegate指向自身，这样我们才能拦截和修改请求。

步骤2：拦截并修改所有目标请求 #

实现webView(_:decidePolicyFor:decisionHandler:)方法，在这个方法里我们可以捕获所有发往目标服务器的请求，添加Authorization头后重新加载。

完整代码示例：

import UIKit
import WebKit

class YourViewController: UIViewController, WKNavigationDelegate {
    private var wkWebview: WKWebView!
    private var accessToken: String = "your-actual-token-here" // 替换为你的token获取逻辑，比如从Cognito获取
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 初始化WKWebView
        let webConfig = WKWebViewConfiguration()
        wkWebview = WKWebView(frame: view.bounds, configuration: webConfig)
        wkWebview.navigationDelegate = self
        view.addSubview(wkWebview)
        
        // 加载主页面（先手动添加一次Authorization头）
        guard let mainUrl = URL(string: "https://myserverdomain.amazonaws.com/api/v3/graphs?date=2020-08-28") else { return }
        var mainRequest = URLRequest(url: mainUrl)
        mainRequest.setValue("Bearer \(accessToken)", forHTTPHeaderField: "Authorization")
        wkWebview.load(mainRequest)
    }
    
    // 拦截所有请求并添加Authorization头
    func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
        // 只处理目标域名的请求，避免给第三方资源添加不必要的头
        guard let requestUrl = navigationAction.request.url,
              requestUrl.host == "myserverdomain.amazonaws.com" else {
            decisionHandler(.allow)
            return
        }
        
        // 复制原有请求并添加Authorization头
        var modifiedRequest = navigationAction.request
        modifiedRequest.setValue("Bearer \(accessToken)", forHTTPHeaderField: "Authorization")
        
        // 加载修改后的请求，同时取消原请求
        webView.load(modifiedRequest)
        decisionHandler(.cancel)
    }
}

关键说明 #

• 域名过滤：我们只对myserverdomain.amazonaws.com的请求添加头，这样不会影响页面中可能存在的第三方资源（比如外部CDN的字体、图片）。
• 请求重写：通过创建原有请求的副本并修改头，然后加载新请求、取消原请求的方式，确保所有子资源请求都带上Authorization。
• Token更新：如果你的access token有过期刷新逻辑，记得及时更新accessToken变量，这样后续的请求会自动使用最新的token。

这个方案能完美解决你遇到的CSS加载问题，和Chrome、Android端的行为保持一致。

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