☰

ヘッダーと一緒にカスタム User-Agent 文字列を送信する (fetch) 質問する

tag-icon • tag-icon javascript reactjs http header fetch-api
ヘッダーと一緒にカスタム User-Agent 文字列を送信する (fetch) 質問する

React で API を使用しておりfetch、JSON エンドポイントからデータを取得しています。

リクエストの一部として、カスタムUser-Agent文字列を送信したいと考えています。現在、リクエストを検査すると、UA 文字列は次のようになります。

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

User-Agent私はリクエストごとにヘッダーを渡しているので、ヘッダーオブジェクトに追加するだけでよいと考えました。様々な 場所オンライン：

fetch(url, {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    'User-Agent': 'MY-UA-STRING' // <---
})

しかし、これは機能しません。報告されているように、フェッチAPIのバグが原因のようです。ここそしてここそしてここ。

headers使用の一部として UA を渡す方法についての回避策を持っている人はいますかfetch?

ベストアンサー1

いくつかテストした結果、Chrome には確かに User-Agent ヘッダーに関するバグがあることがわかりました。

これは、User-Agent ヘッダーがそれほど昔ではない頃 (2015 年半ば) に禁止ヘッダーのリストに含まれていたことが原因であると考えられます。

この特定のヘッダーは最近、許可されていないヘッダーのリストから削除されたため、Firefox (バージョン 43 以降) ではフェッチ呼び出しで User-Agent を変更できますが、Chrome では変更できません。

これがFirefox のバグ、 そしてそのChromium のバグ

そもそもこれが禁止された理由は、User-Agent ヘッダーを使用して任意のデータを送信する正当な理由がまったくなく、実際の User-Agent を送信するために使用されるべきであり、XMLHttpRequest の Fetch などのブラウザ内リクエストでは、User Agent を偽装する正当な理由はまったくないはずだからです。

Chrome でこのバグがいつ修正されるかは誰にもわかりませんが、禁止されているヘッダーのリストに User-Agent ヘッダーがリストされなくなったため、これは確かにバグであり、Fetch のオプション オブジェクトで指定すると変更されるはずです。

ちなみに、ヘッダーは通常、ヘッダーインターフェース、そしてそれらを含めるオプションオブジェクトheaders鍵の下

let headers = new Headers({
    "Accept"       : "application/json",
    "Content-Type" : "application/json",
    "User-Agent"   : "MY-UA-STRING"
});

fetch(url, {
    method  : 'GET', 
    headers : headers 
    // ... etc
}).then( ...

おすすめ記事