Question

我在尝试从API中提取文件中的前15个单词时遇到了问题。我已经尝试过将它们作为XML和JSON，但似乎仍然遇到了这个错误：

XMLHttpRequest无法加载

否＆＃39;访问控制 - 允许 - 来源＆＃39;标头出现在请求的资源上。起源＆＃39; null＆＃39;因此不允许访问。

这是我的代码：

 <script type="text/javascript">
(function() {
  var WeFeelAPI = "http://api.wefeelfine.org:8080/ShowFeelings?display=json&returnfields=feeling,conditions&limit=15";

  $.getJSON( WeFeelAPI,function (json){
    var feel = json.results[15];
    console.log('Our feelings : ', feel);
  });

})();
</script>

任何帮助将不胜感激，我对这一切都很陌生，谢谢

Answer 1

阅读We Feel Fine API，看起来他们看起来并不支持JSONP，甚至是JSON。

阻止您调用它的问题称为同源策略。它可以防止域名向其他域发出非法请求，因为它会带来安全问题。您可以在此处阅读：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript

JSONP（带填充的JSON）是一种站点解决它的方法，方法是将响应加载到外部脚本，然后触发回调函数以验证响应内容。这个实际提供了有关SOP和JSONP的良好信息：http://www.codeproject.com/Articles/42641/JSON-to-JSONP-Bypass-Same-Origin-Policy。

不幸的是，您使用的API并不支持JSONP，因此需要代理方法。使用称为Yahoo Query Language（YQL）的东西有一种聪明/有创意/可能是hackish（观点）的方法。 YQL允许您使用Yahoo的查询服务作为“代理”来执行x域请求。您将具有类似SQL的查询的请求传递给它，并且Yahoo处理JSONP方法。你可以在这里阅读：http://developer.yahoo.com/yql/（对所有的阅读感到抱歉。）

现在有些代码可以证明这一点。请注意，QUERY用于检索XML以及必须为URI使用进行编码的事实：

(function () {
    var url = 'http://api.wefeelfine.org:8080/ShowFeelings?display=xml&returnfields=feeling,conditions&limit=15'
    // using yahoo query
    var query = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from xml where url="' + url + '"') + 
    '&format=json&callback=?';

    // make request via YQL and show data
    $.getJSON( query, function(data) {
        console.log(data);
        // yql returns "results" in "query" from data
        console.log(data.query.results);
    });
})();

与小提琴一起玩：http://jsfiddle.net/Ty3y2/

这种方法实际上可以用于加载HTML，实际上可能更多地使用它。关键是“select * from xml where ...”，它告诉它选择在请求的URL中找到的XML元素内的所有内容。请记住，XML数据在根目录下有一个XML元素。大多数情况下，您会将此视为“select * from html where ...”，因为典型的Web请求会返回HTML，它是根目录下的HTML元素。

我已经将这种方法用于了几个项目，尽管我的大多数项目都是通过PHP或C＃使用代理。但是，我已经取得了很好的成功，当你不想/需要为它设置一个代理时它很有用。

Answer 2

这是一个简单的PHP代理，您可以使用JavaScript

在页面旁边运行

<?php
// Saved as ShowFeelings-proxy.php

$options = array_merge($_GET, ['display' => 'xml']);
// if you don't have PHP 5.4+, you need to use the legacy array literal syntax, eg
// array('display' => 'xml')

$uri = 'http://api.wefeelfine.org:8080/ShowFeelings?' . http_build_query($options);

$xml = simplexml_load_file($uri);

// assuming you'd rather work with JSON (I know I would)
$data = [];
foreach ($xml->feeling as $feeling) {
    $entry = [];
    foreach ($feeling->attributes() as $attr => $val) {
        $entry[$attr] = (string) $val;
    }
    $data[] = (object) $entry;
}

header('Content-type: application/json');
echo json_encode($data);
exit;

然后在你的JavaScript中......

+function($) {
    var url = 'ShowFeelings-proxy.php',
        options = {
            'returnfields': 'feeling,conditions',
            'limit': 15
        };
    $.getJSON(url, options, function(data) {
        var feeling = data[14]; // array is zero-based
        console.log(feeling);
    });
}(jQuery);

试图拉xml / json

2 个答案: