1. 程式人生 > >provisional headers are shown 知多少

provisional headers are shown 知多少

前言

請求裡面provisional headers are shown(顯示臨時報頭) 出現的情況很多,但原因是多樣的。
如果你去直接匹配關鍵字搜尋,得到的結果可能與你自己的情況大相徑庭。
網上大部分都是在跨域時出現,或者是請求被外掛攔截,但關於快取時的請求很少。
我在上文檢視快取的時候發現了這個問題,當時查詢資料都是聚焦於請求被攔截,
所以本文就簡單整理一下相關情況。

問題描述

當重新整理頁面時,想要檢視http請求header中相關資訊時,
發現使用快取的請求(from disk cache或者from memory cache)header相關資訊不能檢視

第一次看到確實有點疑惑,那麼就去搜索了下。
碰到這個提示的情況挺多,但細看下與我們的場景不太符合。


基本上遇到的都是provisional headers are shown,阻止了請求的正常載入。
而我們只是在使用快取的時候遇到,而看起來請求沒有被block掉。好像不太符合。

問題定位

雖然沒有看到匹配度十分相關的資訊,但看到了有啟發的一篇文章(詳情點選)

摘抄部分如下:

The resource could be being blocked by an extension (AdBlock in my case).
The message is there because the request to retrieve that resource was never made, so the headers being shown are not the real thing. As explained in the issue you referenced, the real headers are updated when the server responds, but there is no response if the request was blocked.

資源可能被一些擴充套件程式攔截 。

另外還有一句:

I believe it happens when the actual request is not sent. Usually happens when you are loading a cached resource.

真正請求並未被髮送,當使用快取時經常發生。

之所以會出現這個資訊是因為獲取相關資源的請求並沒有發出,
所以headers被展示並不是真正的資訊。
就像提到的那樣,真正的header只有在服務端返回的時候會更新。
當請求被攔截後,並沒有返回。
基於這個情況開始猜測原因所在:

猜測一、請求跨域被攔截

雖然現在網站的靜態資源都會存在專門的靜態域名下面,和html域名可能不一致。
但是基本都是基於CORS來解決這個問題,所以不存在這個問題。
再有就是,我們這種情況首次請求的時候不會發生,如果有跨域,應該都被block。
另外如果是被攔截,那麼請求應該不會被響應的,我們這裡顯然得到了正確的響應。
這種被排除。

猜測二、伺服器未及時響應

這種猜測和一差不多,特定情況下才會出現,跟伺服器關聯不大。

猜測三、被擴充套件程式攔截

作為一個開發人員,大家的chrome上肯定裝了不少的外掛。這種原因還是有可能的。
我們可以通過 chrome://net-internals 來根據關鍵字查詢相關請求,
然後具體去看相關狀態。
例如我們http://xxdy.tech/css/main.css?v=5.1.4請求

可以看到並沒有出現block,timeout等欄位,只能看到比較明顯的DISK_CACHE。
因此這種情況也不滿足,我們應該是和本地快取強烈相關的。

本地快取

結合上面的分析,我們可以縮小到快取上面。衝著這個目標,我們繼續去看下相關資料。
最後在一篇日文資料裡找到了相關解釋。
似乎只從快取中獲得的通訊顯示為“顯示臨時標題”(或“執行”)
因為該檔案是從快取中獲取的,並且未進行通訊
所以詳細標頭並不會顯示。

原因:未與服務端正確通訊

回過頭來看,前面提到的那麼多情況其實都是與伺服器沒有進行或者完成正確的通訊,所以只展示臨時資訊。

常見狀況

provisional headers are shown出現的情況有這麼幾種:

  1. 跨域,請求被瀏覽器攔截
  2. 請求被瀏覽器外掛攔截
  3. 伺服器出錯或者超時,沒有真正的返回
  4. 強快取from disk cache或者from memory cache,此時也不會顯示

結束語

到這裡provisional headers are shown相關總結就結束了,本身並不是一個問題,但在自身不瞭解的情況下還是要去研究一下,不然永遠是個問題。本文拋磚引玉,給自己一個總結,同時希望能給有需要人一些幫助。

參考文章

https://stackoverflow.com/questions/21177387/caution-provisional-headers-are-shown-in-chrome-debugger
https://did2memo.net/2017/01/23/chrome-devtools-provisional-headers-are-shown/
http://www.techfolks.net/provisional-headers-are-shown-in-google-chrome-browser-debugger/