Question

如何使用JavaScript从REST API获取数据。我有几个基本的API，我想从中获取数据，不需要任何身份验证。所有的API都以JSON的形式返回我想要的数据。例如https://www.codewars.com/api/v1/users/MrAutoIt。我认为使用xmlhttprequest这将是一个非常简单的过程，但看起来same-origin policy给我带来了问题。

我尝试过几个教程，但它们似乎不适用于跨域或我不理解它们。我试图发布教程的链接，但我还没有足够的声誉。

Answer 1

如果您尝试访问不在同一主机上的Web服务：端口作为发出请求的网页，您将遇到相同的源策略。您可以做几件事，但所有这些都需要服务的所有者为您做事。

1）由于相同的源策略不会影响脚本，因此允许服务通过JSONP而不是JSON进行响应;或

2）在授予您网页访问权限的网络服务响应中发送Access-Control-Allow-Origin标题

如果您无法让服务所有者授予您访问权限，您可以在您控制下的服务器上向服务器端（例如来自Node.js或PHP或Rails代码）发出请求，然后将数据转发到您的网页。但是，根据Web服务的服务条款，您可能违反了规定，并且您冒着被禁止服务器的风险。

Answer 2

实际上，它取决于您的服务器REST API支持的JSONP或CORS。您还需要了解CORS的工作原理，因为有两种不同的情况：

简单请求。如果我们使用HTTP方法GET，HEAD和POST，我们就是这种情况。对于POST方法，仅支持具有以下值的内容类型：text/plain，application/x-www-form-urlencoded，multipart/form-data。
预检请求。如果您不是简单请求，则会执行第一个请求（使用HTTP方法OPTIONS）来检查在跨域请求的上下文中可以执行的操作。

也就是说，您需要在AJAX请求中添加一些内容以在服务器端启用CORS支持。我认为标题为Origin，Access-Control-Request-Headers和Access-Control-Request-Method。

大多数像JSular这样的JS库/框架支持这样的方法。

使用jQuery（参见http://api.jquery.com/jquery.ajax/）。通过crossDomain和xhrFields＆gt;可以在此级别进行一些配置。 withCredentials。

使用 Angular （请参阅How to enable CORS in AngularJs）：

angular
  .module('mapManagerApp', [ (...) ]

  .config(['$httpProvider', function($httpProvider) {
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
  });

如果您想为AJAX使用低级JS API，您需要考虑以下几点：

在Firefox 3.5 +，Safari 4+＆amp;中使用XMLHttpRequest IE8 +中的Chrome和XDomainRequest对象
如果您想使用带有AJAX和CORS的凭据，请使用xhr.withCredentials到true。

以下是一些可以帮助您的链接：

了解和使用CORS：https://templth.wordpress.com/2014/11/12/understanding-and-using-cors/
4个jQuery跨域AJAX请求方法：http://jquery-howto.blogspot.fr/2013/09/jquery-cross-domain-ajax-request.html#cors（参见“1. CORS（跨域资源共享）”）
使用CORS释放您的AJAX请求：http://dev.housetrip.com/2014/04/17/unleash-your-ajax-requests-with-cors/
将CORS用于跨域AJAX请求：http://techblog.constantcontact.com/software-development/using-cors-for-cross-domain-ajax-requests/
jQuery和Node.js之间的跨源资源共享cors AJAX请求：http://www.bennadel.com/blog/2327-cross-origin-resource-sharing-cors-ajax-requests-between-jquery-and-node-js.htm

跳它帮助你，亨利

Answer 3

以下是获取数据的方法。

var request = new XMLHttpRequest();
request.open('GET', 'https://www.codewars.com/api/v1/users/MrAutoIt', true);

request.onload = function() {
  if (this.status >= 200 && this.status < 400) {
    var resp = this.response; // Success! this is your data.
  } else {
    // We reached our target server, but it returned an error

  }
};

request.onerror = function() {
  // There was a connection error of some sort
};

request.send();

至于运行相同的原始政策...您应该从您控制的来源请求，或者您可以尝试停用Chrome的网络安全性，或者安装Allow-Control-Allow-Origin *等扩展程序来强制标题。

Answer 4

对于get方法，你可以这样：

@section scripts{
<script type="text/javascript">
$(function()
{
        $.getJSON('/api/contact', function(contactsJsonPayload)
        {
            $(contactsJsonPayload).each(function(i, item)
            {
                $('#contacts').append('<li>' + item.Name + '</li>');
            });
        });
});
</script>
}

在此tutorial中检查主题：练习3：从HTML客户端使用Web API

你如何使用JavaScript的简单REST API

4 个答案: