2015-10-11 4 views
0

Я пытаюсь получить доступ к API через CodePen, но я получаю следующее сообщение об ошибке:Доступ к API через JavaScript

Refused to set unsafe header "Origin" 

XMLHttpRequest cannot load forismatic dot com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access. 

Я попытался добавить заголовки по setRequestHeader, но все та же ошибка;

Вот мой код:

var button = document.getElementById("btn"), 
quote = document.getElementById("quote"), 
author = document.getElementById("author"); 

function showQuote() { 
var req = new XMLHttpRequest(), 
url = "http://api.forismatic.com/api/1.0/"; 
function reqReadyStateChange() { 
if(req.readyState === 4 && req.status === 200) { 
    quote.innerHTML = req.responseText; 
} 
} 

req.open("POST",url); 
req.setRequestHeader("Origin","http://s.codepen.io/"); 
req.setRequestHeader("Access-Control-Allow-Origin","http://s.codepen.io/"); 
req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); 
req.onreadystatechange = reqReadyStateChange; 
req.send(); 

} 

button.addEventListener("click", showQuote); 
+0

Сервер, которому принадлежит API, должен разрешить перекрестный домен, вы не можете его заставить – Jesse

+0

Да, но другие пытались и работали на них, посмотрите на это (Codepen) [http://codepen.io/lucasvorsteveld/full/OVeaLZ], его же API, но только с jQuery – Jay

+0

Они используют JSONP, а не XHR. Forismatic не поддерживает XHR, поэтому вам нужно использовать JSONP. , например. http://stackoverflow.com/questions/21715620/using-jsonp-to-get-json-data-from-another-server Редактировать: или просто посмотреть на их ручку: http://codepen.io/lucasvorsteveld/ ручка/OVeaLZ –

ответ

1

К сожалению, сервер хостинг API сам не допускающей подключение так, как вы делаете это.

Ниже приведен пример простого запроса непосредственно из консоли на этой странице.

var xhr = new XMLHttpRequest(); 
xhr.open('GET', 'http://api.forismatic.com/api/1.0/', true); 
xhr.send() 

XMLHttpRequest cannot load http://api.forismatic.com/api/1.0/ . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://stackoverflow.com ' is therefore not allowed access. VM587:2 XHR failed loading: GET " http://api.forismatic.com/api/1.0/ ".

Таким образом, в этом сообщении об ошибке говорится, что "заголовок Нет 'Access-Control-Allow-Origin' присутствует на запрошенный ресурс." Ресурс - это сервер, содержащий API. Таким образом, доступ к кросс-домену не предоставляется таким образом.

Вы будете хотеть смотреть на ответы из этого вопроса ->How to make a JSONP request from Javascript without JQuery?

Здесь они загружаются этот путь этот API (и, вероятно, большинство API) предпочитают. Кажется, что он просто загружает его в тег скрипта.

Смежные вопросы