私は古いウェブサイトの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'})
わかりました、それは今うまくいきます...しかし私はそれを読むことができません。 = \
それで、不透明な反応の目的は何ですか?
サービスワーカーが不可知論者のキャッシュとして機能する場合を考えてみましょう。あなたの唯一の目標はあなたがネットワークから得るのと同じリソースを提供することですが、より速くなります。もちろん、すべてのリソースがあなたのOriginの一部であることを保証することはできません(例えば、CDNから提供されるライブラリを考えてください)。サービスワーカーはネットワークの応答を変更する可能性があるので、応答の内容、ヘッダー、結果には関心がないことを保証する必要があります。あなたは、おそらくそれをキャッシュしそしてより速くそれを提供するためのブラックボックスとしての応答に興味があるだけです。
これが{ mode: 'no-cors' }
のために作られたものです。
不透明な応答にはJavaScriptではアクセスできませんが、 Cache API を使用してそれらをキャッシュし、サービスワーカーのfetch
イベントハンドラで応答することはできます。そのため、アプリをオフラインにしたり、制御できないリソース(CORSヘッダーを設定していないCDNのリソースなど)にも役立ちます。
Node JSアプリ用のソリューションもあります。 CORS Anywhereは、プロキシされたリクエストにCORSヘッダを追加するNodeJSプロキシです。
プロキシへのURLは文字通りパスから取得され、検証されてプロキシされます。プロキシされたURIのプロトコル部分はオプションであり、デフォルトは "http"です。ポート443が指定されている場合、プロトコルはデフォルトの "https"になります。
このパッケージは、クッキーを除いて、httpメソッドやヘッダーに制限を設けません。ユーザー資格情報の要求は許可されていません。アプリは、たとえばブラウザから直接アクセスしないように、リクエストをプロキシするためのヘッダを要求するように設定できます。 https://robwu.nl/cors-anywhere.html