異種フェッチを反応させないYelp Fusion APIを使用した 'Access-Control-Allow-Origin'ヘッダーなし

Question

誰の助けにも本当に感謝します。 Mac OSXとChromeをブラウザとして使って、Reactで開発するのは比較的新しいものです。私は「同型フェッチ」を使用してYelpのFusionのAPIから非同期GETリクエストを作成しようとする小さなアプリケーションを持っていますが、次のエラー受け取る：

Fetch API cannot load https://api.yelp.com/v3/businesses/search ?[remaining URL] Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:3000 ' is therefore not allowed access. The response had HTTP status code 500. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

を私が同じにどのような回答を参照して検索の多くを行っています問題はすでに存在していますが、この種の開発環境に対する私の比較的新しい知識で私の問題に取り組む方法はさらに混乱しています。 （特に役に立つと思われる回答は​​とAPI Request with HTTP Authorization Header inside of componentDidMountですが、自分の環境でこれらのソリューションを実際に実装する方法を実際には理解していません。

はサイドノートとして：私のChromeブラウザに*拡張子が、私は同じエラーを受け取る - それだけ短く、あまり手の込んだ説明：私は許可-コントロールが許起源をインストールしている

Fetch API cannot load https://api.yelp.com/v3/businesses/search ?[remaining URL]. Response for preflight has invalid HTTP status code 500

次は私が私のコードでフェッチを呼び出す方法です：

var options = (
    method: 'get', 
    headers: new Headers({ 
     'Access-Control-Allow-Origin': '*', 
     'Authorization': [my token] 
     'Content-Type': 'application/json' 
    }) 
} 
return fetch(url, options); 

これは、原因YelpのFusionののOAuth2トークンの要求と私のヘッダの構文に、私はプロキシ関連何かをする必要があります問題です他の何かの理由ですか？プロキシ関連の場合、現在は完全にクライアント主導型のアプリケーションを実行しており、サーバーサイドのコードはまったく使用していません。これは私の環境を考えれば可能でしょうか？ 私はどの方向に向かうべきか、私の誤解を明確にするための指針は非常に高く評価されます。

また、開発者が増えてきてくれてありがとうございます。

Answer 1

この問題の原因は、https://api.yelp.com/がCORSをサポートしていないためです。

あなたが試してみても、あなたのアプリケーションコードで修正できることは何もありません。https://api.yelp.com/がCORSをサポートしていないという事実を変更することはできません。

明らかにYelp APIはJSONPをサポートしていますが、たとえばYelp API Origin http://localhost:8888 is not allowed by Access-Control-Allow-Originを参照してください。

フロントエンドコードでhttps://api.jquery.com/jquery.getjson/などを使用すると、Yelp APIのクロスオリジンにフロントエンドコードからのリクエストを行うことができます。

TL;DR: No CORS is not supported by api.yelp.com

そしてanother related issue：

---

YelpのAPIの例レポのためのGitHubのイシュートラッカーでrelated issue

にはCORSを確認していない

上に引用したコメントの両方からです

As I answered in #99 , we do not provide the CORS headers necessary to use clientside js to directly make requests to the api.

Yelpエンジニア。

つまり、フロントエンドJavaScriptコードがYelp APIエンドポイントに直接リクエストを行い、（JSONPレスポンスではなく）通常の応答を得る方法はありません。

具体的には、https://api.yelp.com/v3/businesses/search APIエンドポイントからのレスポンスにはレスポンスヘッダーが含まれていないため、ブラウザはフロントエンドJavaScriptコードでこれらのレスポンスにアクセスすることを許可しません。あなたの要求がAuthorizationと値application/jsonとContent-Typeヘッダが含まれているため

また、お使いのブラウザは今まであなたが送信しようとしている実際のGET要求を試みる前CORS preflight options requestを行います。

このプリフライトは、この場合に特に失敗するものです。しかし、フロントエンドのJavaScriptコードからそのAPIエンドポイントへの他のリクエストも、プリフライトを開始しなかった場合でも失敗します。