Azure billing API javascript returns CORS error but not when using postman

Question

I am at a loss now. I am trying to reach the Azure Billing & Usage API via my php application, but keep getting the following error:

XMLHttpRequest cannot load https://ea.azure.com/rest/{agreementnumber}/usage-reports. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

I know the link mentions the url is https://consumption.azure.com/v2/enrollments, however this was not working for me and after contact with Azure tech service I needed to use the older ea.azure.com entry point.

I am trying this from my development xampp localhost server as well as the production server (live intranet solution), but to no avail. Using postman the connection succeeds and I receive a valid response from the API.

Basically the API requires only an API key, which i have. no authorization is required next to this.

As Postman is succesful in getting a valid response from the API, I used their code generator to get me:

• php script
• javascript script
• jquery ajax script

All of them return the same error for me; the jquery ajax one is shown because that one is preferred:

var settings = {
              "async": true,
              "crossDomain": true,
              "url": "https://ea.azure.com/rest/<?php echo $agreement_number; ?>/usage-reports",
              "method": "GET",
              "dataType": 'json',
              "headers": {
                "authorization": "bearer <?php echo $key; ?>"
              },
                error: function (jqXHR, exception) {
                    var msg = '';
                    if (jqXHR.status === 0) {
                        msg = 'Not connected.\n Verify Network.';
                    } else if (jqXHR.status == 404) {
                        msg = 'Requested page not found. [404]';
                    } else if (jqXHR.status == 500) {
                        msg = 'Internal Server Error [500].';
                    } else if (exception === 'parsererror') {
                        msg = 'Requested JSON parse failed.';
                    } else if (exception === 'timeout') {
                        msg = 'Time out error.';
                    } else if (exception === 'abort') {
                        msg = 'Ajax request aborted.';
                    } else {
                        msg = 'Uncaught Error.\n' + jqXHR.responseText;
                    }
                    console.log(msg);
                }
            }

            $.ajax(settings).done(function (response) {
              console.log(response);
            });

I do not understand why Postman is able to connect to the API and retrieve it's information, whilst exactly the same code generates a CORS error when used in my application.

Could this have something to do with my application being hosted in an internal virtual machine within the company's network, not accessible from the internet?

Edit: Rory mentioned the tight security restrictions of JS - therefore I added the php script also. As I use php 5.6, I do not have the class httpRequest by default, so I used the httpRequest class by twslankard and tweaked it to accept custom headers like this (added public function):

public function setHeaders($headers) {
  if(is_array($headers)) {
      foreach($headers as $name => $val) {
          $this->headers[$name] = $val;
      }
  }

}

And calling the class like this:

include_once($_SERVER['DOCUMENT_ROOT'].'/functions/class_httprequest.php');
$request = new HttpRequest($url, 'GET');
$request->setHeaders(array(
  'api-version' => '2014-09-02',
  'authorization' => $key
));
try {
    $response = $request->send();
    echo $request->getStatus().'<br>';
    echo $request->getResponseBody();
} catch (HttpException $ex) {
    echo $ex;
}

Using the php version it did work, the trick was adding the api-version header, before that I got an http 400 error back using the php script.

Answer 1

Using the php version it did work, the trick was adding the api-version header, before that I got an http 400 error back using the php script.