データを取得できません。CORSの問題です.JSONPでハッキングしようとしても、まだ動作しません。

Question

http://www.recipepuppy.com/api/?q=onion&p=1からデータを取得しようとしています。 （サンプルクエリ）

これはブラウザで動作しますが、私はReactアプリ内でフェッチしようとしていましたが、私は“No 'Access-Control-Allow-Origin' header is present on the requested resourceエラーが発生しました。

私は戦略を変更しましたが、今はJSONP（https://github.com/mzabriskie/axios/blob/master/COOKBOOK.md#jsonp）を使用しようとしています。

しかし、私はそれを動作させることはできません。私はいつもこのエラーを受けています。誰かが私の問題を助けてくれますか？

エラー：

キャッチされないにReferenceError：？1

マイコード：

import jsonp from 'jsonp' 

export const FETCH_RECIPES = 'FETCH_RECIPE' 
export const SHOW_INFO = 'SHOW_INFO' 

export function fetchRecipes (searchTermToDOoooooooooo) { 
    const request = jsonp('http://www.recipepuppy.com/api/?q=onion&p=1', null, function (err, data) { 
    if (err) { 
     console.error(err.message) 
    } else { 
     console.log(data) 
    } 
    }) 

    return (dispatch) => { 
    /* 
    request.then(({ data: data1 }) => { 
     dispatch({ type: FETCH_RECIPES, payload: data1 }) 
    }) 
    */ 
    } 

} 

export function showInfo (info) { 
    return { 
    type: SHOW_INFO, 
    payload: info 
    } 
} 

JP0をq =タマネギ& P = 1つの&コールバック= __ JP0で が定義されていません。 devツールでそのエラーがどのように見えるか：

Answer 1

少なくともJSONP + Axios（Axios doesn't (natively) support JSONP;）ではクライアント専用コードではできません。 "jsonp"ライブラリはAxiosとは異なります）。これは、クロスオリジンのルールに違反している情報を取得しているサーバーだからです。この場合は、Access-Control-Allow-Originヘッダー用に設定されていないレシピ子犬です。

@Pointyが指摘するように、1つのオプションはサーバー側プロキシを使用することです。クライアントが情報をサーバー側のプロキシを呼び出す

1. ：

   あなたの流れは、その後にシフトします。

2. プロキシはRecipe PuppyのAPIを呼び出し、必要に応じて情報を変換または通過します。
3. プロキシは、その情報をクライアント側のコードに中継して処理します。

jsonpへの現在の移行については、何らかの理由でjsonpライブラリがjp0を正しくエクスポートしていないようです。ビルドツールでエラーが発生する可能性があります。設定を再確認し、ビルドツールがjsonpライブラリをピックアップして実際にコンパイルされたソースに配置していることを確認してください。