2017-05-09 21 views
2

私はFetch APIについて学び、どのように使用できるのですか?しかし、有効なjsonでthis pageに要求すると、応答はnullを返します。私はcodepen.ioでこのリクエストをしていますので、CORSとのこの取引を知っています。フェッチAPIリクエストはnullを返します

const headers = new Headers(); 
const params = { 
    method: 'GET', 
    headers : headers, 
    mode : 'no-cors' 
} 

const request = new Request('http://api.forismatic.com/api/1.0/method=getQuote&format=json&lang=en'); 

fetch(request, params).then(function(response){ 
    return response; 
}).then(function(json){ 
    console.dir(json.body); 
}); 

開発ツールでの要求は、これを返します。

Response 
body : null 
bodyUsed : false 
headers :Headers 
ok:false 
redirected : false 
status : 0 
statusText : "" 
type: "opaque" 
url :"" 

MDNから:

The Promise returned from fetch() won’t reject on HTTP error status even if the response is an HTTP 404 or 500. Instead, it will resolve normally (with ok status set to false), and it will only reject on network failure or if anything prevented the request from completing.

私に追加レスポンスボディが存在しない理由だから私は思ったんだけど要求されたJSONの内容を取得するために変更/追加する必要があるものは何ですか?

+2

あなたがno-CORSモードを使用しているため。それはそれがしていることです:反論をすることは許されますが、応答を得ることはできません。 – Kaiido

+0

'method'を' cors'に変更すると、これはコンソールに表示されます。 'フェッチAPIはhttp://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=enを読み込めません。要求されたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません。したがって、Origin 'http://s.codepen.io'はアクセスできません。あなたのニーズに不透明な応答が必要な場合は、CORSを無効にしてリソースをフェッチするために、要求のモードを 'no-cors'に設定してください。 ' – jkjmr6

+2

あなたの主な問題はCORSです/そのAPIはCORSを許可していないようですあなたのページのリソースを "借りる" - ページの代わりにそのAPIにアクセスするためのサーバー側のメソッドが必要です –

答えて

0

ここでは、no-corsを使用した場合の問題点を示します。現在、これはグローバルウィンドウオブジェクトでは機能しません。 Postman経由でうまく動作します。

no-cors with fetch

関連する問題