你如何在 JavaScript 中使用简单的 REST API答案

【问题标题】：How do you use a simple REST API’s with JavaScript你如何在 JavaScript 中使用简单的 REST API
【发布时间】：2015-11-11 01:21:04
【问题描述】：

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

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

【问题讨论】：

您应该发布您尝试过的示例代码。您的问题过于开放和模糊。
假设您不控制 API 的服务器，并且它们不允许 CORS，您真的无能为力。一种可能（虽然极端）是为该 API 设置反向代理服务器。 (This answer could help.)
你怎么知道他们是否允许 CORS？我能在 CORS 上找到的唯一一个好网站是：html5rocks.com/en/tutorials/cors。我找不到有关如何确定网站是否允许 CORS 的任何信息。

标签： javascript json api rest

【解决方案1】：

如果您尝试访问的 Web 服务与发出请求的网页不在同一个 host:port 上，您将遇到同源策略。您可以做几件事，但所有这些都需要服务的所有者为您做事。

1) 由于同源策略不影响脚本，因此允许服务以 JSONP 而不是 JSON 响应；或

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

如果您无法让服务所有者授予您访问权限，您可以从受您控制的服务器发出请求服务器端（例如从 Node.js 或 PHP 或 Rails 代码），然后将数据转发到您的网页。但是，根据网络服务的服务条款，您可能会违反，并且您可能会被禁止您的服务器。

【讨论】：

【解决方案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 这样的标题。

大多数 JS 库/框架（如 Angular）都支持这种方法。

使用 jQuery（请参阅 http://api.jquery.com/jquery.ajax/）。通过crossDomain 和xhrFields > 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+ 和 Chrome 中使用 XMLHttpRequest，在 IE8+ 中使用 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/
对跨域 AJAX 请求使用 CORS：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

希望对你有帮助，蒂埃里

【讨论】：

【解决方案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 * 之类的扩展程序以强制标头。

【讨论】：

如果您尝试过该代码，您会知道它正是 OP 所询问的问题。（“同源政策给我带来了麻烦。”）
问题是“如何将简单的 REST API 与 JavaScript 结合使用”。但我还添加了有关克服同源策略问题的信息。
如果他对同源策略有问题，他显然知道如何提出请求。而且您发布的反策略信息仅用于调试和学习目的，并且在正常的 Web 开发中完全无法使用，因为您需要要求网页的每个用户放弃他们的安全性以适应您的网页。这就像将清洁服务宣传为“一尘不染的厨房，保证 100% 满意，我们要求您在外墙上打一个洞让我们的工人进入”，而不是向房主索要钥匙。
我知道您非常关心您的 Reputation 分数，但您无需如此敌对并否决有效答案。我为这个问题提供了一个有效的解决方案。如果问题是关于应该是标题的跨域请求，而不是如何使用其余 API。
谢谢。来回答主题中的问题（甚至没有阅读Q的正文）并得到它。为我工作（我的案例中不涉及同源政策）

【解决方案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

【讨论】：