問(wèn)題描述

在我們的 Web 應(yīng)用程序中，我們使用 XHR.getAllResponseHeaders() 函數(shù)來(lái)獲取標(biāo)頭字段名稱.我們使用 X-Access-Token 來(lái)接收我們?cè)谙乱粋€(gè)請(qǐng)求中發(fā)送的 JWT-token 以保持會(huì)話.從今天開(kāi)始，登錄后，每個(gè)下一個(gè)請(qǐng)求都會(huì)導(dǎo)致重定向回登錄頁(yè)面.

In our web-application, we use the XHR.getAllResponseHeaders()-function to fetch the header field names. We use the X-Access-Token to receive a JWT-token which we sent in the next request to keep session. Since today, after login in, each next request resulted in a redirect back to the login page.

奇怪的是，只有 Chrome 有這個(gè)問(wèn)題，而不是 Firefox 或 Safari.而且它只在我的電腦上，因?yàn)槲业耐氯匀豢梢缘卿洠也荒?

Strangely enough, it was only Chrome having this problem, not Firefox or Safari. And it was only on my pc, because my colleague could still login while I couldn't.

我們使用相同的軟件，一些 javascript，一切都相同，所以我們注意到它必須與我的瀏覽器有關(guān).嘗試重新安裝并禁用一些插件，但這并不重要.

We use the same software, some javascript, same everything, so we noted it has to be something with my browser. Tried a re-instal and disabling some plugins, but that didn't matter anything.

我看起來(lái)像 XHR.getAllResponseHeaders() 函數(shù)返回了錯(cuò)誤的值，盡管我們從服務(wù)器發(fā)送了正確的值...有人知道為什么它不再工作了嗎?p>

I looks like the XHR.getAllResponseHeaders() function returns the wrong values, although we send the right ones from the server... Anyone an idea why it isn't working anymore?

推薦答案

經(jīng)過(guò)大量搜索、調(diào)試、測(cè)試和很多挫折，我們終于發(fā)現(xiàn) Chrome 60 中的 header 字段名稱轉(zhuǎn)換為小寫，合同為Chrome 59(在我同事的電腦上)，名字保持不變.所以標(biāo)題字段名稱現(xiàn)在是 x-access-token 而不是 X-Access-Token

After a lot of searching, debugging, testing and a lot of frustration we finally found out that the header field names in Chrome 60 where converted lowercase, in contract to Chrome 59 (on the pc of my colleague) where the names remained untouched. So the header field name was now x-access-token instead of X-Access-Token

對(duì)于那些在某個(gè)地方的 javascript 中使用 XHR.getAllResponseHeaders() 函數(shù)并使用 Chrome 或他們的客戶端的人:準(zhǔn)備好必須修補(bǔ)您的 javascript 以保持工作正常，因?yàn)?strong>從 Chrome 60 開(kāi)始，XHR.getAllResponseHeaders() 函數(shù)現(xiàn)在只輸出小寫標(biāo)題字段名稱！

For those who're using the XHR.getAllResponseHeaders()-function in their javascript somewhere, and are using Chrome, or their clients: Be prepared to have to patch your javascript in order to keep thing working, because since Chrome 60, the XHR.getAllResponseHeaders()-function now only output lowercase header field names!

有同樣問(wèn)題的人:https://twitter.com/thegecko/status/890346862875742210

@thegecko:阿格！#Chrome 60 在 XHR.getAllResponseHeaders() 中強(qiáng)制標(biāo)頭名稱為小寫字母讓我心碎！

@thegecko: Argg! #Chrome 60 forcing header names to be lowercase in XHR.getAllResponseHeaders() has broken me!

另請(qǐng)參閱:https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/_oxlCPNsrck，https://github.com/whatwg/xhr/issues/146 和 https://chromium.googlesource.com/chromium/src/+/99c274ae8e7d366261dcfb89e0b98e733fb9d5f4

根據(jù) github 和 google 小組中的討論，我們被警告說(shuō)執(zhí)行區(qū)分大小寫的字符串比較可能是一件壞事.在即將到來(lái)的 HTTP/2 中，所有標(biāo)頭都是小寫的.因此，XHR 規(guī)范在 HTTP/1.1 中也將其所有標(biāo)頭都更改為小寫.Chrome (60) 是第一個(gè)改變這一點(diǎn)的，但是 Gecko/Firefox 的補(bǔ)丁 (https://bugzilla.mozilla.org/show_bug.cgi?id=1370485) 和 Webkit/Safari 已經(jīng)可用...

Based on the discussion in the github and google groups, we were alerted that it's probably a bad thing to execute case-sensitive string compares. In the upcomming HTTP/2, all headers will be lowercase. Because of this, the XHR-specification changed to lowercase all their headers also in HTTP/1.1. Chrome (60) is the first one who changed this, but patches for Gecko/Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1370485) and Webkit/Safari are already avaialble...

我們使用一些簡(jiǎn)單的代碼進(jìn)行了測(cè)試，但是當(dāng)從我們的服務(wù)器發(fā)送標(biāo)頭 Foo: Bar 時(shí)，XHR.getAllResponseHeaders()-function 的輸出(在Chrome 60) 將是 `foo: Bar.

We tested things out with some simple code, but when sending the header Foo: Bar from our server, the output of XHR.getAllResponseHeaders()-function (in Chrome 60) will be `foo: Bar.

因此，為了使其在所有瀏覽器中都能正常工作并永不過(guò)時(shí):確保對(duì)響應(yīng)中的標(biāo)頭字段名稱執(zhí)行不區(qū)分大小寫的比較.這可以通過(guò)在處理標(biāo)頭之前使用 XHR.getAllResponseHeaders().toLowerCase() 或使用不區(qū)分大小寫的正則表達(dá)式(如 XHR.getAllResponseHeaders().match(/foo) 輕松完成)/i); 找到它們.

So, in order to get it working in all browsers and be future-proof: Make sure to execute a case-insensitive compare on the header field names from the response. This can be done very easily by using XHR.getAllResponseHeaders().toLowerCase() before handling the headers or by using a case-insensitive regexp like XHR.getAllResponseHeaders().match(/foo/i); to find them.

經(jīng)過(guò)更多測(cè)試...我們發(fā)現(xiàn)使用 XHR.getResponseHeader() 也是一種從請(qǐng)求標(biāo)頭獲取值的安全方法.根據(jù)上面的例子，當(dāng)發(fā)送 header Foo: Bar 時(shí)，我們使用 XHR.getResponseHeader('Foo') 還是 XHR 都沒(méi)有關(guān)系.getResponseHeader('foo')，兩者都會(huì)輸出值'Bar'.

After more testing... we found out that using the XHR.getResponseHeader() is also a safe way of getting values from the header ofthe request. Based on the example above, when sending the header Foo: Bar, it doesn't matter if we use XHR.getResponseHeader('Foo') or XHR.getResponseHeader('foo'), both will output the value 'Bar'.

MDN 文檔XHR.getResponseHeader 證實(shí)了這一點(diǎn):

The MDN documentation for XHR.getResponseHeader confirms this:

標(biāo)題名稱的搜索不區(qū)分大小寫.

The search for the header name is case-insensitive.

這篇關(guān)于XHR.getAllResponseHeaders() 在 Chrome 60 中未按預(yù)期返回標(biāo)頭的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！