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

Question

How do you get data from a REST API with JavaScript. I have several basic API's that I would like to get data from that don't require any authentication. All of the API's return the data I want back in JSON. For example https://www.codewars.com/api/v1/users/MrAutoIt . I thought this would be a very simple process using xmlhttprequest but it appears the same-origin policy is giving me problems.

I have tried following several tutorials but they don't seem to work on cross domains or I don't understand them. I tried to post links to the tutorials but I don't have a high enough reputation on here yet.

Answer 1

If you are trying to access a web service that is not on the same host:port as the webpage that is issuing the request, you will bump into the same origin policy. There are several things you can do, but all of them require the owner of the service to do things for you.

1) Since same origin policy does not impact scripts, allow the service to respond by JSONP instead of JSON; or

2) Send Access-Control-Allow-Origin header in the web service response that grants your webpage access

If you cannot get the service owner to grant you access, you can make a request serverside (eg from Node.js or PHP or Rails code) from a server that is under your control, then forward the data to your web page. However, depending on terms of service of the web service, you may be in breach, and you risk them banning your server.

Answer 2

In fact, it depends on what your server REST API supports regarding JSONP or CORS. You also need to understand how CORS works because there are two different cases:

• Simple requests . We are in this case if we use HTTP methods GET , HEAD and POST . In the case of POST method, only content types with following values are supported: text/plain , application/x-www-form-urlencoded , multipart/form-data .
• Preflighted requests . When you aren't in the case of simple requests, a first request (with HTTP method OPTIONS ) is done to check what can be done in the context of cross-domain requests.

That said, you need to add something into your AJAX requests to enable CORS support on the server side. I think about headers like Origin , Access-Control-Request-Headers and Access-Control-Request-Method .

Most of JS libraries / frameworks like Angular support such approach.

• With jQuery (see http://api.jquery.com/jquery.ajax/ ). There are some possible configurations at this level through crossDomain and xhrFields > withCredentials .

• With Angular (see How to enable CORS in AngularJs ):

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

If you want to use low-level JS API for AJAX, you need to consider several things:

• use XMLHttpRequest in Firefox 3.5+, Safari 4+ & Chrome and XDomainRequest object in IE8+
• use xhr.withCredentials to true , if you want to use credentials with AJAX and CORS.

Here are some links that could help you:

• Understanding and using CORS: https://templth.wordpress.com/2014/11/12/understanding-and-using-cors/
• 4 jQuery Cross-Domain AJAX Request methods: http://jquery-howto.blogspot.fr/2013/09/jquery-cross-domain-ajax-request.html#cors (see "1. CORS (Cross-Origin Resource Sharing)")
• Unleash your AJAX requests with CORS: http://dev.housetrip.com/2014/04/17/unleash-your-ajax-requests-with-cors/
• Using CORS for Cross Domain AJAX requests: http://techblog.constantcontact.com/software-development/using-cors-for-cross-domain-ajax-requests/
• Cross origin resource sharing cors AJAX requests between jQuery and Node.js: http://www.bennadel.com/blog/2327-cross-origin-resource-sharing-cors-ajax-requests-between-jquery-and-node-js.htm

Hop it helps you, Thierry

Answer 3

Here is how you get data.

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();

As far as running into same origin policy... You should be requesting from an origin you control, or you can try disabling Chrome's web security, or installing an extension such as Allow-Control-Allow-Origin * to force headers.

Answer 4

For a get method you could have something like this:

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

In this tutorial check the topic: Exercise 3: Consume the Web API from an HTML Client