Issue Sending JS HTTP GET Request to API

Other Halo API Support
1

Hey everyone,

I feel dumb, but I’m having issues getting a simple JS HTTP GET request to work with the API. I have tried using the AJAX example provided in the documentation:
var params = {
// Request parameters
“modes”: “arena”,
“start”: “0”,
“count”: “25”,
};

$.ajax({
url: “https://www.haloapi.com/stats/h5/players/bubster360/matches?" + $.param(params),
beforeSend: function(xhrObj){
// Request headers
xhrObj.setRequestHeader(“Ocp-Apim-Subscription-Key”,”{sub-key}");
},
type: “GET”,
dataType: “json”,
data: “”,
// Request body
data: “{body}”
})
.done(function(data) {
alert(“success”);
})
.fail(function() {
alert(“error”);
});

However, I keep getting the following error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.haloapi.com/stats/h5/players/bubster360/matches?modes=arena. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

I’m sure it has something to do with the “body” portion of the request that is meant to go into data, but I have no idea what I am supposed to put for that part.
Alternatively, I have tried the following JS with the same results:

$http.get(‘https://www.haloapi.com/stats/h5/players/bubster360/matches?modes=arena’,
{headers: {‘Ocp-Apim-Subscription-Key’: ‘{sub-key}’}})
.success(function (response) {
vm.matches = response;
})
.error(function () {
alert(“Error - HTTP request for matches failed!”);
});

Any help with this would be appreciated!

2

I’m still having issues with this. If anyone has an example of a simple JavaScript call to the API, that would be awesome!

3

Have you tired googling that error message, because what it means and what you think the problem is are two very different things.

4

For security purposes you cannot perform HTTP requests within Javascript to any servers on a different domain. You’ll need to setup a service on your website to forward the requests to the Halo API.

5

So they expose the API and provide examples for javascript, but don’t allow requests from other domains… Makes sense.

6

> 2533274874932408;5:
> So they expose the API and provide examples for javascript, but don’t allow requests from other domains… Makes sense.

The Halo API isn’t actually the thing responsible for this issue. It’s actually your browser, from the reading I’ve done on the issue. Basically, (and as far as I understand it), your browser has in place what’s called the same-origin policy, meaning that you cannot retrieve data from a domain outside your own for security purposes. If you were able to do this, it’s possible that a malicious script might be able to get some sensitive data from another web page.

From what I’ve read, there a couple of solutions for this. One is JSONP which is a hacky yet seemingly official way of overcoming these restrictions by wrapping the response up in a nice HTML response whose tags are passed to a JavaScript callback function. I’m not entirely sure how all of this works or if my terminology is correct, seeing as I just started learning about web technologies recently (been programming in Java and Python for most of my hobby career).

Another way I’ve read about getting around this is by using a PHP Proxy to send and retrieve and data from the JavaScript side of things (I think that’s how it’s phrased).
Again, I’m not very familiar with any of these technologies and have just been doing a bit of research on a solution for these issues myself. I’ve actually started just writing my projects in Java because I’m so much more familiar with it, though I should probably use this as an opportunity to learn JavaScript/PHP/etc.

I hope this has been at least somewhat informative. Happy hacking!

7

> 2533274911816136;6:
> > 2533274874932408;5:
> > So they expose the API and provide examples for javascript, but don’t allow requests from other domains… Makes sense.
>
>
> The Halo API isn’t actually the thing responsible for this issue. It’s actually your browser, from the reading I’ve done on the issue. Basically, (and as far as I understand it), your browser has in place what’s called the same-origin policy, meaning that you cannot retrieve data from a domain outside your own for security purposes. If you were able to do this, it’s possible that a malicious script might be able to get some sensitive data from another web page.
>
> From what I’ve read, there a couple of solutions for this. One is JSONP which is a hacky yet seemingly official way of overcoming these restrictions by wrapping the response up in a nice HTML response whose tags are passed to a JavaScript callback function. I’m not entirely sure how all of this works or if my terminology is correct, seeing as I just started learning about web technologies recently (been programming in Java and Python for most of my hobby career).
>
> Another way I’ve read about getting around this is by using a PHP Proxy to send and retrieve and data from the JavaScript side of things (I think that’s how it’s phrased).
> Again, I’m not very familiar with any of these technologies and have just been doing a bit of research on a solution for these issues myself. I’ve actually started just writing my projects in Java because I’m so much more familiar with it, though I should probably use this as an opportunity to learn JavaScript/PHP/etc.
>
> I hope this has been at least somewhat informative. Happy hacking!
>
> - JSONP: JSONP - Wikipedia
> - Same-Origin Policy: Same-origin policy - Wikipedia
> - Cross Domain with a proxy: JSONP - Wikipedia
> - I haven’t used this, but this might be worth your time: http://stackapps.com/questions/891/how-to-call-the-api-via-jsonp-in-plain-old-javascript

I know about cross-origin and it isn’t allowed by default, but you can enable it on server side. And then in your ajax request add things like:
crossDomain: true
and xhrFields{
useCredentials: true
}

Which if they do have it enabled on the server then their example in their documentation by default should have the cross origin request, since everyone who is using the API is outside their domain.

Thanks for the response though, pretty good research on CORS!