web-dev-qa-db-ja.com

fetch（）予期しない入力の終了

APIサーバーからデータを取得するためにfetch（）を使用しています。私のエラーは次のようになります：

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))
javascriptjsoncorsfetch-api
22
Matt

クロスオリジンリソースへのno-corsリクエストのレスポンスには、 レスポンスタイプ 'opaque' があります。 JSONに変換する前に応答をログに記録すると、「不透明」なタイプが表示されます。

不透明タイプは 「厳しく制限されている」としてリストされている です。

不透明フィルター応答は、タイプが「不透明」、urlリストが空のリスト、ステータスが0、ステータスメッセージが空のバイトシーケンス、ヘッダーリストが空、本文がnull、トレーラーが空のフィルター応答です。

現在、タイプが不透明の場合、それらを読み取ることはできません。

不透明な応答は、CORSヘッダーを返さない異なるオリジンのリソースに対して行われた要求に対するものです。不透明な応答では、返されたデータを読み取ったり、要求のステータスを表示したりできません。つまり、要求が成功したかどうかを確認できません。現在のfetch（）実装では、ウィンドウのグローバルスコープとは異なるOriginのリソースをリクエストすることはできません。

不透明（OPAQUE）型に関するGoogleのドキュメントを参照 。

45
KevBot

同じ問題がありました。私の場合、ソリューションが示した「不透明」の応答タイプが原因ではありませんでした。 「fetch」は空の本文の応答を受け入れないため、このコードは空の応答でエラーを引き起こします。

return fetch(urlToUser, parameters)
.then(response => {
  return response.json()
})
.then((data) => {
  resolve(data)
})
.catch((error) => {
  reject(error)
})

代わりに、私の場合、これはよりうまく機能します：

return fetch(urlToUser, parameters)
.then(response => {
  return response.text()
})
.then((data) => {
  resolve(data ? JSON.parse(data) : {})
})
.catch((error) => {
  reject(error)
})

本文を取得しても、空の本文であってもエラーは発生しません。次に、データが存在するかどうかを確認して解決します。私はそれが役立つことを願っています:-)

10
Pibo

PHPのヘッダーまたは別のサーバーエンドポイントに行が必要です。

<?php
header('Access-Control-Allow-Origin: *');
//or
header('Access-Control-Allow-Origin: http://example.com');

// Reading JSON POST using PHP
$json = file_get_contents('php://input');
$jsonObj = json_decode($json);

// Use $jsonObj
print_r($jsonObj->message);

...
// End php
?>

POST要求を使用した作業フェッチコードのモデルは次のとおりです。

const data = {
        optPost: 'myAPI',
        message: 'We make a research of fetch'
    };
const endpoint = 'http://example.com/php/phpGetPost.php';

fetch(endpoint, {
    method: 'POST',
    body: JSON.stringify(data)
})
.then((resp) => resp.json())
.then(function(response) {
    console.info('fetch()', response);
    return response;
});
3
Roman

CORS Originポリシーの問題に遭遇しました。これに取り組むには、サーバー側のAPIにアクセスする権限が必要です。特に、phpまたは別のサーバーエンドポイントのヘッダーに行を追加する必要があります。

<?php
header('Access-Control-Allow-Origin: *');
//or
header('Access-Control-Allow-Origin: http://example.com');

// Reading JSON POST using PHP
$json = file_get_contents('php://input');
$jsonObj = json_decode($json);

// Use $jsonObj
print_r($jsonObj->message);

...
// End php
?>

また、サーバーエンドポイントのヘッダーに含まれないようにしてください。

header("Access-Control-Allow-Credentials" : true);

POST要求を使用した作業フェッチコードのモデルは次のとおりです。

const data = {
        optPost: 'myAPI',
        message: 'We make a research of fetch'
    };
const endpoint = 'http://example.com/php/phpGetPost.php';

fetch(endpoint, {
    method: 'POST',
    body: JSON.stringify(data)
})
.then((resp) => resp.json())
.then(function(response) {
    console.info('fetch()', response);
    return response;
});
0
Roman