HTTPリクエストでのHTTPリクエスト承認リクエストのヘッダーcomponentDidMount内

Question

私はReactに非常に新しく、練習するために、Yelp APIから情報を取得するアプリケーションを構築しようとしていますが、レスポンスに問題があります。 Yelp Fusion v3には 'access_token'が必要です（私はPostmanで応答として正常に受信しました）。私のアプリケーションでこのリクエストを行うために、私はAxiosを使用しています。私はcomponentDidMount（の内側にこの要求を作っていた場合）、応答として私は

のXMLHttpRequestがhttps://api.yelp.com/v3/businesses/search?term=sushi&location=Bostonをロードすることはできませんを取得します。プリフライト要求への応答がアクセス制御チェックを通過しない：要求されたリソースに「アクセス制御許可」がない。 Origin 'http://localhost:8080'はアクセスできません。 （アプリケーションの一部ではない）別のファイルに同じコードを実行しているとき、私は間違って、access_tokenはとパラメータを指定していますように見えるかもしれないが、応答はHTTPステータスコード500

を持っていた、私はJSONレスポンスを取得します私のアプリで探している。

は、ここに私のcomponentDidMount（）である：私もYelpのノードモジュールを試してみた

componentDidMount: function() { 
    axios.get('https://api.yelp.com/v3/businesses/search?term=Sushi&location=Boston',{ 
     headers: { 
      Authorization: `Bearer ${token}` 
     } 
    }) 
    .then(function(res){ 
     console.log(res) 
    }) 
    .catch(function(err){ 
     console.log(err) 
    }) 
}, 

が、私は運を持っていないのです。助けてください！

Answer 1

このエラーは、Cross-Originエラーです。

Webブラウザには、AJAXリクエストのキャッチがあります。同じ発信元に送信する必要があります。また、サードパーティ自身によって許可されている必要があります。あなたはYelpを制御できないので、回避策を講じることをお勧めします。

利用可能な回避策あなたはJSONPのようなものを使用

• 。この方法は、基本的には<script>タグで要求を行うことから成ります。サーバーはJavascriptスクリプト内で応答をラップし、ページにロードされます。 （https://en.wikipedia.org/wiki/JSONP）。その回避策が動作するためには、サーバーはこの形式を提供しなければなりません。
• リバースプロキシを使用しています。 NodeJSを1として動作させるように設定できます。この設定では、yelpを元に戻して、それをyelpサーバーにリダイレクトします。これは、ノードプロキシにブラウザと同じ制限がないために機能します。 （例：https://github.com/nodejitsu/node-http-proxy）

これを回避する他の方法もありますが、よく使われる方法です。

これが役に立ちます。