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添加标题，但仍然是相同的错误;

这是我的代码：

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无法加载http://api.forismatic.com/api/1.0/。没有＆＃39;访问控制允许来源＆＃39;标题出现在请求的上资源。起源＆＃39; http://stackoverflow.com＆＃39;因此是不允许的访问。 VM587：2 XHR加载失败：GET ＆＃34; http://api.forismatic.com/api/1.0/＆＃34;

因此，在此错误消息中，它指出＆＃34; No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。＆＃34;资源是包含API的服务器。因此，没有跨域提供访问权限。

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

这里他们正在加载这个API（可能是大多数API）喜欢的方式。这似乎只是将其加载到脚本标记中。

通过JavaScript访问API

1 个答案: