2017-05-03 16 views
3

私たちのAPIからデータをフェッチしようとしています。 APIは、CORSのサポートを有効にし、OPTIONS要求に対する応答の下に返しました:React Native - OPTIONSの後にCORSでフェッチAPIを使用する

Access-Control-Request-Headers:content-type 
Access-Control-Allow-Origin:* 

APIが'application/json'以外'Content-type'何もすることはできません。

この制限を使用して、のReact-Nativeメソッドを使用してデータを取得しようとしています。

方法1(無CORS):

{ 
    method: 'POST', 
    mode: "no-cors", 
    headers: { 
     'content-type': 'application/json' 
} 

この方法では、ブラウザは自動的に 'text/plainの' としてコンテンツタイプを送信します。これはCORSがデフォルトで3つのヘッダーのうちの1つだけを許可するためです。ただし、サーバーはこのコンテンツタイプをサポートしていないため、サポートされていないコンテンツタイプの場合はエラーが返されます。

方法2(CORSを持つか、何もない):このシナリオでは

{ 
    method: 'POST', 
    mode: "cors", // or without this line 
    redirect: 'follow', 
    headers: { 
     'content-type': 'application/json' 
    } 
} 
... 
.then(response => console.log(response)) 

、ChromeのF12のネットワークツールを使用して、私は、サーバーがデータを返す見ることができます。サーバーへの最初の要求はfetchですOPTIONSの場合これに対して、サーバは上記のヘッダセットと共に空のオブジェクトで返信します。次の呼び出しは、実際のP​​OST API呼び出しであり、サーバーはデータを含む適切なJSON応答で応答します。しかし、私のコードを介してコンソールに着信している応答は{}です。これは、反応のfetch APIが実際のPOST呼び出しの代わりにOPTIONS呼び出しの応答を返すためと考えられます。

OPTIONS要求の応答を無視し、thenメソッドが後続要求の応答を処理する方法はありますか?

答えて

5

すぐに問題になるのは、現在書かれているコードでは応答がJSONになると予想していますが、実際には応答はJSONを取得するために処理する必要があるPromiseです。

fetch("https://example.com") 
    .then(response => response.json()) 
    .then(jsondata => console.log(jsondata)) 

は、だから、代わりにこのような何かをする必要があります

関連する問題