react-native-video中CloudFront签名Cookie发送问题求助

核心问题定位 #

你当前把CloudFront签名Cookie放在DRM的headers里，这是给许可证请求用的，但CloudFront的签名验证是针对视频源本身的请求，所以得把Cookie附加到视频源的请求头里，而不是DRM请求。

可行解决方案 #

1. 修正Source的Headers配置（优先尝试） #

确保Cookie格式符合标准（键值对之间用; 分隔，注意分号后有空格），并且直接放在source的headers字段中：

<Video
  source={{
    uri: uri,
    headers: {
      'Cookie': `CloudFront-Key-Pair-Id=${cookies['CloudFront-Key-Pair-Id']}; CloudFront-Signature=${cookies['CloudFront-Signature']}; CloudFront-Policy=${cookies['CloudFront-Policy']}`
    },
    drm: {
      type: "widevine",
      licenseServer: 'https://drm-widevine-licensing.axtest.net/AcquireLicense',
      // DRM的headers若无需Cookie可留空，按需配置即可
    }
  }}
  // 其他组件属性...
/>

如果还是无效，检查react-native-video版本——部分旧版本对headers的支持有缺陷，建议升级到最新稳定版。

2. 原生层拦截请求添加Cookie（彻底解决） #

如果JS层设置headers无效，说明组件底层的媒体请求没有读取JS配置的headers，这时候需要在原生层添加请求拦截器：

Android（OkHttp Interceptor）

在MainApplication.java中添加自定义Interceptor：

import okhttp3.Interceptor;
import okhttp3.Request;
import okhttp3.Response;
import java.io.IOException;

public class CloudFrontCookieInterceptor implements Interceptor {
  private String cookieValue;

  public CloudFrontCookieInterceptor(String cookie) {
    this.cookieValue = cookie;
  }

  @Override
  public Response intercept(Chain chain) throws IOException {
    Request originalRequest = chain.request();
    Request modifiedRequest = originalRequest.newBuilder()
        .addHeader("Cookie", cookieValue)
        .build();
    return chain.proceed(modifiedRequest);
  }
}

随后在OkHttp客户端配置中添加该Interceptor（需对应react-native-video使用的OkHttp客户端进行修改）。

iOS（NSURLProtocol）

创建自定义NSURLProtocol子类拦截请求并添加Cookie：

import Foundation

class CloudFrontCookieProtocol: NSURLProtocol {
  override class func canInit(with request: URLRequest) -> Bool {
    // 仅拦截你的视频源请求，可通过域名过滤
    return request.url?.host?.contains("your-cloudfront-domain.com") ?? false
  }

  override class func canonicalRequest(for request: URLRequest) -> URLRequest {
    return request
  }

  override func startLoading() {
    guard let mutableRequest = (request as NSURLRequest).mutableCopy() as? NSMutableURLRequest else {
      client?.urlProtocolDidFinishLoading(self)
      return
    }
    // 填入你的CloudFront签名Cookie
    let cookieValue = "CloudFront-Key-Pair-Id=xxx; CloudFront-Signature=xxx; CloudFront-Policy=xxx"
    mutableRequest.setValue(cookieValue, forHTTPHeaderField: "Cookie")
    
    let task = URLSession.shared.dataTask(with: mutableRequest as URLRequest) { [weak self] data, response, error in
      guard let self = self else { return }
      if let error = error {
        self.client?.urlProtocol(self, didFailWithError: error)
      } else if let response = response, let data = data {
        self.client?.urlProtocol(self, didReceive: response, cacheStoragePolicy: .notAllowed)
        self.client?.urlProtocol(self, didLoad: data)
      }
      self.client?.urlProtocolDidFinishLoading(self)
    }
    task.resume()
  }

  override func stopLoading() {}
}

在AppDelegate.swift中注册该Protocol：

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
  NSURLProtocol.registerClass(CloudFrontCookieProtocol.self)
  return true
}

3. 临时替代：URL参数传递签名 #

如果以上方法暂时无法生效，可以把CloudFront签名参数作为URL查询参数传递（注意这种方式安全性低于Cookie，仅作测试或临时方案）：

const signedUri = `${uri}?CloudFront-Key-Pair-Id=${cookies['CloudFront-Key-Pair-Id']}&CloudFront-Signature=${cookies['CloudFront-Signature']}&CloudFront-Policy=${cookies['CloudFront-Policy']}`;

<Video
  source={{
    uri: signedUri,
    drm: {
      type: "widevine",
      licenseServer: 'https://drm-widevine-licensing.axtest.net/AcquireLicense',
    }
  }}
  // 其他属性...
/>

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