通过 JavaScript 访问 API答案

【问题标题】：Accessing API through JavaScript通过 JavaScript 访问 API
【发布时间】：2016-01-08 19:04:59
【问题描述】：

我正在尝试通过 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);

【问题讨论】：

拥有API的服务器需要允许跨域，不能强制
是的，但是其他人已经尝试过并且它为他们工作，看看这个（Codepen）[codepen.io/lucasvorsteveld/full/OVeaLZ]，它的 API 相同，但只使用 jQuery
他们使用的是 JSONP，而不是 XHR。 Forismic 不支持 XHR，所以你必须使用 JSONP。例如stackoverflow.com/questions/21715620/… 编辑：或者看看他们的笔：codepen.io/lucasvorsteveld/pen/OVeaLZ

标签： javascript ajax api

【解决方案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/。不请求中存在“Access-Control-Allow-Origin”标头资源。因此不允许使用原点“http://stackoverflow.com” 使用权。 VM587:2 XHR 加载失败：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）喜欢的方式加载。这似乎只是将其加载到脚本标签中。

【讨论】：