Wikipedia APIのCORSエラー

Question

私は、反応の中でwikipedia api呼び出しを処理する方法について少し混乱しています。私は、このエラーに実行し続ける：今、私はフォームを送信時にアクションを実行しています

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource(...)

、フォームは、フォームの入力値を取り、WikipediaのAPIのURLにそれを挿入します。私はJSONPを使ってみましたが、それはスーパーハッキーだと聞いて以来、本当にそれを使用したくないです。

アクション/ index.js

import axios from 'axios'; 

const WIKI_URL = "https://en.wikipedia.org/w/api.php?action=query&format=jsonp&list=search&titles="; 
const FETCH_ARTICLES = 'FETCH_ARTICLES'; 

export function fetchArticles(term) { 
    const url = `${WIKI_URL}${term}`; 
    const request = axios.get(url); 

    return { 
    type: FETCH_ARTICLES, 
    payload: request 
    } 

必要であれば、私は間違いなく、より多くのコードを追加することができますが、どこに問題がある、私が言うことができるものから、これはあります。

編集：私はJSONPを使用しなければならなかったが、私はまだできなかった。私はAxiosがJSONPをサポートしていないと信じていますが、使用するにはより良いライブラリがありますか？いくつかのAPIはなぜCross Origin Reference Errorを持っているのですか？

Answer 1

ドロップformat=jsonpとWIKI_URL値のクエリのparamsにorigin=*を追加します。

const WIKI_URL = "https://en.wikipedia.org/w/api.php?origin=*&action=query…"; 

the CORS-related docs for the Wikipedia backendを参照してください：

限り

For anonymous requests, origin query string parameter can be set to * which will allow requests from anywhere.

format paramのように、JSON出力がデフォルトですので、指定する必要はありません。

Answer 2

JSONPを使用せずにこの問題を回避するには、リクエストを受け入れ、適切なCORSヘッダーをレスポンスに追加するプロキシサーバーを用意することです。出発点として、これは参照として役立ちます：https://gist.github.com/pauloricardomg/7084524