CORS Error on Wikipedia API

问题:

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?

回答1:

Drop format=jsonp and add origin=* to the query params in the WIKI_URL value:

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

See 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.

As far as the format param, JSON output is the default, so I think you don’t need to specify that.

回答2:

In order to get around this without using JSONP, the solution would be to have a proxy server which accepts your requests, and adds the proper CORS headers to the response. As a starting point, this will help as a reference: https://gist.github.com/pauloricardomg/7084524