javascript - CORS Error on Wikipedia API - Stack Overflow

admin管理员组

文章数量:1302379

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 = ".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?

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/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?

• javascript
• ajax
• reactjs
• cors
• react-redux

Share Improve this question Follow edited Jun 22, 2019 at 9:33 sideshowbarker♦ 88.3k2929 gold badges215215 silver badges212212 bronze badges asked Feb 16, 2017 at 19:48 SamSam 46111 gold badge66 silver badges1313 bronze badges 1

• Looks like a few others are having the same problem github./mzabriskie/axios/issues/191 – Andrew Axton Commented Feb 16, 2017 at 21:51

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

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

const WIKI_URL = "https://en.wikipedia/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 you don’t need to specify that.

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./pauloricardomg/7084524

本文标签： javascriptCORS Error on Wikipedia APIStack Overflow