I am a little confused about how to handle a wikipedia api call in react. I keep running into this error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource(...)
Right now, I am running an action upon submitting a form, the form takes the form input value and inserts that into the Wikipedia api URL. I have tried using JSONP, but I really would prefer not to use that since I have heard it is super hacky.
actions/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 }
I can definitely add more code if necessary, but from what I can tell, this is where the problem lies.
edit: If I had to use JSONP, I still have not been able to. I believe that axios does not support JSONP, would there be a better library to use? Why do some APIs have a Cross Origin Reference Error while others do not?