fetch() 予期せぬ入力の終了

質問

fetch()を使って、apiサーバーからデータを取得しています。私のエラーは次のようになります。

Uncaught (in promise) SyntaxError: Unexpected end of input at 
  fetch.then.blob.

何が間違っているのか、教えてください。

const weatherAPi ='https://www.metaweather.com/api/location/523920';
fetch(weatherAPi, {
  mode: 'no-cors'
}).then(blob => blob.json())
  .then(data => console.log(data))

どのように解決するのですか？

不透明なレスポンス

のレスポンスは no-cors リクエストのレスポンスには、クロスオリジンリソースへの のレスポンスタイプは 'opaque' です。 . レスポンスを JSON に変換する前にログに記録すると、"opaque" というタイプが表示されます。

不透明な型は は "severely restricted" としてリストされています。 として、whatwg.org の fetch spec で説明されています。

opaqueフィルタリングされたレスポンスは、タイプが "opaque"、URLリストが空リスト、ステータスが0、ステータスメッセージが空のバイト列、ヘッダーリストが空、ボディがNULL、トレーラが空のフィルタリングされたレスポンスのことです。

で説明されているように、タイプが不透明な場合は現在読み取ることができません。 Google の opaque 型に関するドキュメント .

不透明な応答は、CORS ヘッダーを返さない異なるオリジンのリソースに対して行われた要求に対するものです。不透明な応答では、返されたデータを読んだり、要求の状態を表示したりすることはできません。現在の fetch() の実装では、window グローバル スコープと異なるオリジンのリソースに要求を行うことはできません。

サーバーで CORS サポートを有効にする

これは、環境に依存する場合と言語に依存する場合があります。例えば、サーバーの設定を変更することでNginxの環境内でCORSの設定を変更したり、PHPなどのアプリケーションのコード内でヘッダーを指定したりすることができます。

を読むことを強くお勧めします。 CORS リクエストに関する Mozilla のドキュメント そしてまた アクセス制御-許可-オリジン .

PHPでの例です。

<?php
header("Access-Control-Allow-Origin: *");  // "*" could also be a site such as http://www.example.com