没有chrome插件,CORS请求无法正常工作

时间:2016-12-03 10:56:51

标签: javascript google-chrome cors

我正试图通过GET httprequest

使用此代码从this website获取引用
var jsonObj;
var httpReq = new XMLHttpRequest();

var processJson = function (json) 
{
    jsonObj = JSON.parse(json);
    document.getElementById("quote-text").innerHTML = jsonObj.quoteText;
    document.getElementById("quote-author").innerHTML = jsonObj.quoteAuthor;
}


httpReq.onload = function() 
{
    if (httpReq.status === 200)
    {
        processJson(this.response);    
    }        
};
httpReq.open("GET", "http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en", true);
httpReq.send();

唯一的问题是这段代码只适用于Chrome上安装的CORS插件,否则无效。它给我的错误如下:

MLHttpRequest无法加载http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此,不允许原点“http://127.0.0.1:64290”访问。

有任何线索吗?谢谢!

1 个答案:

答案 0 :(得分:1)

如果他们使用JSONP,他们显然不知道CORS是什么 当您包含带回调的脚本时,JSONP是一种格式,然后风险是数据可能泄漏并且他们可以在页面中插入任何代码

var loadJSONP = (function(){
  var unique = 0;
  return function(url, callback, context) {
    // INIT
    var name = "_jsonp_" + unique++;
    if (url.match(/\?/)) url += "&jsonp="+name;
    else url += "?callback="+name;

    // Create script
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    // Setup handler
    window[name] = function(data){
      callback.call((context || window), data);
      document.getElementsByTagName('head')[0].removeChild(script);
      script = null;
      delete window[name];
    };

    // Load JSON
    document.getElementsByTagName('head')[0].appendChild(script);
  };
})();


loadJSONP(
  'http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en',
   function(data) {
     console.log(data);
   }
);

另一种可能的解决方案是使用像cors代理这样的东西 - 有一些但你可以建立自己的



var cors = "https://cors-anywhere.herokuapp.com/"
var url = "http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en"

fetch(cors + url)
.then(res => res.json())
.then(json => console.log(json))




使用cors代理的风险是他们可以侦察通过的数据。您还可以随时使用额外的服务