javascript - 通过 JavaScript 访问 API

Question

我正在尝试通过 CodePen 访问 API ，但我不断收到以下错误:

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添加 header ，但仍然是同样的错误；

这是我的代码:

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);

Answer 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” header 。”资源是包含 API 的服务器。因此，不提供像这样的跨域访问。

您将想要查看此问题的答案 -> How to make a JSONP request from Javascript without JQuery?

在这里，他们按照 API(可能还有大多数 API)喜欢的方式加载它。这似乎只是将其加载到脚本标记中。