所以我创建了一个页面,通过从http://forismatic.com/en/api/引用引号来生成随机引号。我已经完成了页面并使用jQuery。但我想用CORS方法和纯Javascript来了解一切是如何工作的。
在tutorial之后,我写了以下代码:
function createCORSRequest(method, url){
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr){
//check if the XMLHttpRequest object has a "withCredentials" property. "withCredentials" only exists on XMLHTTPRequest2 objects.
//open request
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined"){
// XDomainRequest only exists in IE, and is IE's way of making CORS requests.
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
// Otherwise, CORS is not supported by the browser.
xhr = null;
}
return xhr;
}
function makeCORSRequest(){
var url = "http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=_"
var xhr = createCORSRequest('GET', url);
if (!xhr) {
alert('CORS not supported');
return;
}
// Response handlers.
xhr.onload = function() {
var text = xhr.responseText;
alert('Response from CORS request to ' + url);
};
xhr.onerror = function() {
alert('Woops, there was an error making the request.');
};
xhr.send();
}
makeCORSRequest();
在Chrome上运行该页面时,我收到了警告' Woops,发出请求时出错。'和控制台中的错误消息:
XMLHttpRequest无法加载http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=_。 No' Access-Control-Allow-Origin'标头出现在请求的资源上。起源' http://localhost:8080'因此不允许访问。
由于Web浏览器的原始策略相同,我不确定在使用CORS方法时会弹出相同的错误消息。那么如何用纯Javascript来解决这个问题?