javascript - CORS 请求在没有 chrome 插件的情况下无法工作

Question

我正在尝试从 this website 获取报价将此代码与 GET httprequest 结合使用

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” header 。来源'http://127.0.0.1:64290 ' 因此不允许访问。

有什么线索吗？谢谢!

Answer 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 代理的风险在于它们可以监视正在传递的数据。您还依赖于随时可能中断的额外服务