使用API​​与CORS和纯Javascript

时间:2016-12-20 07:57:24

标签: javascript cors

所以我创建了一个页面,通过从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来解决这个问题?

0 个答案:

没有答案