web-dev-qa-db-ja.com

OPTIONS応答後にフェッチAPIをCORSで機能させる

APIからデータを取得しようとしています。 APIはCORSサポートを有効にし、OPTIONSリクエストに以下の応答を返します。

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

APIは、'Content-type'以外の'application/json'を許可しません。

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

方法1（ノーコーズ）：

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

このメソッドを使用すると、ブラウザーはcontent-typeを「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です。これに対して、サーバーは空のオブジェクトと上記のヘッダーセットを返します。次の呼び出しは実際のPOST API呼び出しで、サーバーはデータを含む適切なJSON応答で応答します。ただし、コードを介してコンソールに表示される応答は{}。これは、reactのfetch AP​​Iが実際のOPTIONS呼び出しの代わりにPOST呼び出しの応答を返すためだと思います。

OPTIONSリクエストのレスポンスを無視し、thenメソッドを取得して後続のリクエストのレスポンスを処理する方法はありますか？

javascriptreactjsreact-nativecorsfetch-api
9
letsc

あなたが当たっている当面の問題は、現在記述されているコードはレスポンスがJSONであることを期待しているが、レスポンスは実際にはJSONを取得するために処理する必要がある約束であるということです。

そのため、代わりに次のようなことを行う必要があります。

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