ハンドルの応答 - SyntaxError：予期しない入力の終了

Question

私はREST-APIへのReactJSフェッチ呼び出しを試して、応答を処理したいと思います。コール作品は、私はクローム開発ツールで見ることができます応答を取得：

function getAllCourses() { 
fetch('http://localhost:8080/course', { 
    method: 'POST', 
    mode: 'no-cors', 
    credentials: 'same-origin', 
    headers: { 
     'Accept': 'application/json', 
     'Content-Type': 'application/json', 
    }, 
    body: JSON.stringify({ 
     objectClass: 'course', 
     crud: '2' 
    }) 
}).then(function (response) { 
    console.log(response); 
    return response.json(); 

}).catch(function (err) { 
    console.log(err) 
}); 
} 

私は応答を処理しようとすると、私は「にSyntaxError：入力の予期しない終了」を得た

return response.json(); 

で

にconsole.logは次のようになります。私のレスポンスJSONは次のようになります

、それは私がjsonlintでそれを確認し、有効である：

で

[ 
    { 
    "0x1": { 
     "users": [], 
     "lectures": [], 
     "owner": "0x2", 
     "title": "WWI 14 SEA", 
     "description": null, 
     "objectClass": "course", 
     "id": "course_00001" 
    }, 
    "0x2": { 
     "username": "system", 
     "lectures": [], 
     "course": null, 
     "solutions": [], 
     "exercises": [], 
     "roles": [ 
     "0x3", 
     "0x4", 
     "0x5" 
     ], 
     "objectClass": "user", 
     "id": "user_00001" 
    }, 
    "0x3": { 
     "roleName": "ROLE_ADMIN", 
     "objectClass": "role", 
     "id": "role_00001" 
    }, 
    "0x4": { 
     "roleName": "ROLE_STUDENT", 
     "objectClass": "role", 
     "id": "role_00002" 
    }, 
    "0x5": { 
     "roleName": "ROLE_DOCENT", 
     "objectClass": "role", 
     "id": "role_00003" 
    } 
    } 
] 

Answer 1

リクエストからmode: 'no-cors'の設定を削除する必要があります。そのmode: 'no-cors'はあなたが抱えている問題の原因です。

mode: 'no-cors'リクエストは応答タイプopaqueとなります。この質問のconsole-logスニペットは、それを明確に示しています。 opaqueは、フロントエンドのJavaScriptコードが応答の一部を見たり、何もすることができないことを意味します。

https://developer.mozilla.org/en-US/docs/Web/API/Request/modeは説明する：

no-cors — JavaScript may not access any properties of the resulting Response

だからmode: 'no-cors'を設定した場合の効果は、ブラウザを伝えるために本質的である

I「をフロントエンドのJavaScriptコードアクセスどのような状況の下での応答をさせてはいけません。」 http://localhost:8080/courseの応答にAccess-Control-Allow-Originレスポンスヘッダーが含まれていないか、またはブラウザがOPTIONSの要求を行っているために、要求のためにmode: 'no-cors'を設定しているとしますお客様のリクエストはCORS preflightをトリガーするリクエストであるため、http://localhost:8080に変更してください。

しかし、mode: 'no-cors'を設定することは、これらの問題の解決策ではありません。

• Access-Control-Allow-Origin応答ヘッダを送信するとOPTIONS要求

• 又はhttps://github.com/Rob--W/cors-anywhere/又は

からのコードを使用して、CORSプロキシを設定を処理するため http://localhost:8080サーバーを構成する：溶液のいずれかであります

Answer 2

ごthenあなたはresponse.jsonを返す前にレスポンスがOKであるかどうかを確認する必要があります

.then(function (response) { 
    if (!response.ok) { 
     return Promise.reject('some reason'); 
    } 

    return response.json(); 

}) 

あなたが拒否された約束にエラーメッセージを持つようにしたい場合は、あなたのような何かをすることができます

を

.then(function (response) { 
    if (!response.ok) { 
     return response.text().then(result => Promise.reject(new Error(result))); 
    } 

    return response.json(); 
})