了解 CORS

在本主題中，您將了解內建在 Web 中的 CORS 和限制條件，包括視訊、影像和指令碼等資產的跨來源參照。

概覽

跨域資源共享（CORS）是一種機制，它允許網頁向除提供該網頁的域之外的其他域發出請求。通常，Web瀏覽器會禁止跨域請求。CORS定義了域可以交互以確定是否允許跨域請求的方式。

CORS和Brightcove

在三種情況下，必須將CORS與Brightcove服務/產品一起使用：

  1. 視頻字幕：包含視頻字幕的文件可以存儲在非Brightcove域中。由於視頻本身將由Brightcove域提供，因此將導致跨域問題。
  2. Brightcove Player和HLS：的Brightcove Player's HLS插件使用AJAX請求來檢索HLS視頻的清單和各個片段。由於這些HLS資源可以存儲在任何Internet可訪問的域上，因此這些資源可能是由與服務播放器的Brightcove域不同的服務器（通常是CDN域）提供的。這將再次導致跨域問題。
  3. 視頻靜止圖像和縮略圖圖像：為在Studio中捕獲視頻靜止圖像和縮略圖圖像，視頻演示必須帶有CORS標頭（默認情況下，應在Brightcove的大多數內部CDN上啟用該標頭）；如果您有一個自定義CDN，或者我們尚未更新，則無法進行圖像捕獲

解決方案

Brightcove目前使用的解決方案涉及配置Access-Control-Allow-Origin CDN原始服務器的配置文件中的標頭。值得注意的是，由於不同的CDN合作夥伴使用不同的服務器解決方案來傳遞其內容，因此下面的標頭信息僅作為示例提供，而不是作為插入式代碼段提供。

Brightcove已成功使用以下內部CDN服務器屬性的標頭指令：

<FilesMatch ".(vtt|xml)$">
              Header set Access-Control-Allow-Headers: X-Requested-With
              Header add Access-Control-Allow-Origin: https://admin.brightcove.com
          </FilesMatch>

以下內容對該指令進行了簡要說明：

  • <FilesMatch ".(vtt|xml)$">：此條件設置Access-Control-Allow-Origin標頭僅在vtt或xml文件上。測試已確認此標頭未與圖像或其他HTTP傳遞的內容一起發送。
  • Header set Access-Control-Allow-Headers: X-Requested-With：該標頭是Access-Control-Allow-Origin標頭起作用，因為播放器發出的請求是XmlHttpRequest。
  • Header add Access-Control-Allow-Origin: https://admin.brightcove.com :這是訪問控制標頭本身，用於允許來自指定域的內容。

在Apache上啟用CORS

您可以在Apache服務器的配置中設置標頭以啟用CORS。將以下內容放在適當的位置.conf文件：

Header set Access-Control-Allow-Origin "*"

在上面的示例中，星號充當通配符，並允許訪問所有域。通配符也可以替換為一特定領域。通常對於Brightcove播放器來說，這是行不通的，因為在許多情況下，資產將駐留在多個域中。您可以實施其他解決方案，以限制對可接受域的特定白名單的訪問。

自帶CDN

如果您是擁有BYO CDN且存在跨域問題的客戶，則應聯繫CDN以獲取有關為帳戶配置CORS的幫助。這是我們建議的設置：

  • 訪問控制允許標題：X請求的
  • 訪問控制允許來源：*
  • 文件格式：m3u8 m3u ts xml dfxp vtt mpd m4f mp4 jpg png

令牌授權要求

在需要令牌授權的情況下，需要對上述解決方案進行更改。在令牌授權的情況下，CORS安全模型明確禁止使用*字符作為值Access-Control-Allow-Origin響應頭。除此之外Access-Control-Allow-Credentials響應標頭是必需的，並且必須設置為true。

用於令牌授權的更新的標頭指令為：

<FilesMatch ".(m3u8 | m3u | ts)$">
        # with AJAX withCredentials=true (cookies sent, SSL allowed...)
        SetEnvIfNoCase ORIGIN (.*) ORIGIN=$1
        Header set Access-Control-Allow-Origin "%{ORIGIN}e"
        Header set Access-Control-Allow-Credentials "true"
        RewriteEngine On
        RewriteCond %{REQUEST_METHOD} OPTIONS
        RewriteRule ^(.*)$ $1 [R=200,L,E=HTTP_ORIGIN:%{https:ORIGIN}]
  </FilesMatch>

以下幾點詳細介紹了與早期解決方案的區別：

  • 該指令查詢傳入請求中是否存在Origin標頭，如果該標頭存在（通常存在），則將其值設置為一個名為ORIGIN：SetEnvIfNoCase ORIGIN (.*) ORIGIN=$1
  • 的Access-Control-Allow-Origin響應標頭值設置為ORIGIN剛剛創建的變量：Header set Access-Control-Allow-Origin "%{ORIGIN}e"
  • 的Access-Control-Allow-Credentials標頭必須設置為true：Header set Access-Control-Allow-Credentials "true"

HLS和CORS

在某些環境（例如Amazon S3）中，您可以為HLS指定CORS配置。以下將CORS配置為允許HLS播放。

<CORSConfiguration>
      <CORSRule>
      <AllowedOrigin>*</AllowedOrigin>
      <AllowedMethod>GET</AllowedMethod>
      </CORSRule>
</CORSConfiguration>

有關特定於Amazon S3的更多信息，請參閱啟用跨域資源共享。

儘管與CORS相切，但是客戶端瀏覽器需要接受所有會話cookie才能進行令牌授權的HLS內容交付。雖然某些客戶端瀏覽器（例如Google Chrome和Mozilla Firefox）默認情況下接受會話cookie，但其他瀏覽器（例如Internet Explorer）則不接受，因此用戶必須啟用此選項。