2017-02-16 90 views
1

我對如何處理維基百科API調用中的反應有點困惑。我一直運行到這個錯誤:維基百科上的CORS錯誤API

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

現在,我運行在提交表單的動作,形式採取的形式輸入值,並插入到這一點維基百科的API網址。我曾嘗試使用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具有跨源參考錯誤,而其他API則不?

+0

看起來像其他一些人也有同樣的問題https://github.com/mzabriskie/axios/issues/191 –

回答

2

下降format=jsonp並在WIKI_URL增值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參數,JSON輸出是默認的,所以我認爲你不需要指定。

1

爲了在不使用JSONP的情況下解決這個問題,解決方案應該是有一個接受你的請求的代理服務器,並且將正確的CORS頭添加到響應中。作爲一個起點,這將有助於作爲參考:https://gist.github.com/pauloricardomg/7084524

+0

我希望比創建一個代理服務器更簡單的解決方案。爲什麼某些API會導致此問題,而其他API則不會?從我所知道的情況來看,每當您引用一個API時,就會調用一些不屬於您的域的東西 – Sam

+1

如果該域是「跨域」,即表示端點未解析到腳本所服務的域;瀏覽器發出一個OPTIONS請求,查看是否允許當前的源發出某個請求。如果API未將您的域名包含在允許的來源列表中,則瀏覽器將阻止該請求。這是爲了防止惡意客戶端應用程序訪問他們不應該被允許訪問的資源。 – ianks