2016-03-29 2 views
75

私は古いウェブサイトのURLをfetchしようとしたし、エラーが起こった:不透明なリクエストとは何ですか?

Fetch API cannot load http://xyz. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://abc' is therefore not allowed access. 
If an opaque response serves your needs, set the request's mode to 'no-cors' 
to fetch the resource with CORS disabled. 

私がメッセージを理解し、不透明な要求を実行しようとしました:

fetch("http://xyz", {'mode': 'no-cors'}) 

[OK]を、それが機能するようになりました...私はそれを読むことができません。 = \

不透明なリクエストの目的は何ですか?

答えて

69

サービスワーカーが無関係なキャッシュとして機能するケースを考えてみましょう。あなたの唯一の目標は、ネットワークから取得するリソースと同じリソースを提供することですが、より高速に処理できます。もちろん、すべてのリソースがあなたの起源の一部であることを保証することはできません(例えば、CDNから提供される図書館を考えてください)。サービスワーカーはネットワークの応答を変更する可能性があるため、応答の内容やヘッダー、さらには結果に関心がないことを保証する必要があります。おそらくそれをキャッシュし、より速くそれを提供するブラックボックスとしての応答にのみ興味があります。

これは{ mode: 'no-cors' }が作成された理由です。

46

OpaqueレスポンスにはJavaScriptでアクセスできませんが、それでもCache APIでキャッシュすることができ、サービスワーカーのfetchイベントハンドラで応答することができます。したがって、アプリをオフラインにしたり、管理できないリソース(CORSヘッダーを設定していないCDNのリソースなど)にも役立ちます。

0

また、Node JSアプリの解決策もあります。 CORS Anywhereは、CORSヘッダーをプロキシされた要求に追加するNodeJSプロキシです。

プロキシのURLは、文字通りパスから取得され、検証され、プロキシされます。プロキシされたURIのプロトコル部分はオプションで、デフォルトは "http"です。ポート443が指定されている場合、プロトコルはデフォルトで「https」になります。

このパッケージでは、Cookieを除いてhttpのメソッドやヘッダーに制限はありません。ユーザー資格情報の要求は許可されていません。たとえば、ブラウザからの直接訪問を避けるために、リクエストをプロキシするためのヘッダーが必要になるようにアプリを設定できます。 https://robwu.nl/cors-anywhere.html

関連する問題