WKWebView加载静态页面时携带cookie的方法

关键词：WKWebView JS交互 Cookie

问题：

最近在帮助别人往原生APP中接入一部分H5的内容，H5用的是本项目原有的M站，而M站有自己的登录模块，APP也有自己的登录模块(明显不能让APP中登录的用户在此页面再次登录)。好消息是两者的cookie是可以通用的。坏消息是由于接入的那个页面是静态页面，不能获取request里请求头的内容，所以之前将cookie放在request的请求头中的方法行不通。

分析：

由于之前JS交互都是在请求头中存放cookie，联调时前端表示完全看不到cookie，后来一对才知道是静态页面，看不到请求头。然后百度其他方法大多都是针对UIWebView的，再深度百度发现原来WKWebView并不支持自动保存和使用cookie。基本找到病因了，既然不能放在请求头中，于是决定直接写成JS能看懂的东西让浏览器去执行。

Show Me Code：

  //以下代码因出现在实例化WKWebView的方法中
  WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
  config.preferences.minimumFontSize = 0;
  config.preferences.javaScriptEnabled = YES;
  config.preferences.javaScriptCanOpenWindowsAutomatically = YES;
  WKUserContentController *JSSelectOCMethod = config.userContentController;
  //APP原生的cookie与H5存放的形式稍有不同，所以调用下面的方法对这个字符串进行简单的修改
  NSString * cookieValue = [self MakeCookieForH5:cookStr];
  // 加cookie给h5识别
  WKUserScript * cookieScript = [[WKUserScript alloc] initWithSource: cookieValue injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:NO];
  [JSSelectOCMethod addUserScript:cookieScript];

  WKWebView *wkwebView = [[WKWebView alloc] initWithFrame:[UIScreen mainScreen].bounds configuration:config];
  //此处接你的wkwebView的个性化设置等代码

• 下面这个方法在上面被调用了，为了让阅读更完整所以粘一下。
• 这个方法是用来处理字符串的，APP原生的cookie与H5存放的形式稍有不同，所以需要简单的修改一下：

// 将所有cookie以document.cookie = 'key=value';形式进行拼接
- (NSString *)MakeCookieForH5:(NSString *)String {
    NSArray *arr = [String componentsSeparatedByString:@"; "];
    NSMutableString *returnStr = [[NSMutableString alloc] init];
    for (NSString *str in arr) {
        [returnStr appendFormat:@"document.cookie = '%@';",str];
    }
    return returnStr;
}

按照上面的方法上传cookie后前端表示能看到了，附图一张，红色的部分表示看到了我上传的cookie :) 这是前端给的图.png

一点暖心的tips：

• 解决这个问题没有太好的逻辑方法，我解决这个问题也是在搜索过很多方法进行了大量的实验精炼出了上面的代码，用，就好了。如果非要说逻辑方法，那就是用OC调用JS方法来处理数据。

• 处理这个问题时因为我传cookie给前端时，前端直接拿来访问后台了，没法用断点的方法调试程序。为了方便调试，前端加入了弹窗来显示是否获取到cookie，对，用弹窗来代替断点。另外多说一句，WKWebview默认是不能弹窗的，如果需要弹窗需要实现相关方法，这个资料网上很多就不在赘述了。

• 最后，如有错误，恳请斧正