How to send an HTTP request with a header parameter?

Question

I'm very new to javascript and web programming in general and I need some help with this. I have an HTTP request that I need to send through javascript and get need to store the output in a variable. I tried using just the call url:

https://api.fantasydata.net/nfl/v2/JSON/PlayerSeasonStats/2015

But it returns an authentication error because I didn't send my API key and it doesn't show me how to do it just in the URL. The API key is listed as a header and not a paramater and I'm not sure what to do with that. I tried using the XMLHttpRequest() class but I'm not quite sure I understand exactly what it does nor could I get it to work.

The actual HTTP Request

GET https://api.fantasydata.net/nfl/v2/JSON/PlayerSeasonStats/2015 HTTP/1.1
Host: api.fantasydata.net
Ocp-Apim-Subscription-Key: ••••••••••••••••••••••••••••••••

I just need to figure out how to send that request along with the key and how to store the JSON doc it returns as a variable in javascript.

EDIT: This is what I have so far:

function testingAPI(){
var key = "8a1c6a354c884c658ff29a8636fd7c18";
httpGet("https://api.fantasydata.net/nfl/v2/JSON/PlayerSeasonStats/2015",key    );
alert(xmlHttp.responseText);
var x = 0;
}

function httpGet(theUrl,key)
{
var xmlHttp = new XMLHttpRequest();

xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
xmlHttp.setRequestHeader("Ocp-Apim-Subscription-Key",key);
xmlHttp.send( null );
return xmlHttp.responseText;
}

Thank you!

Where is your code sending request?

hindmost
– hindmost

2015-12-16 18:43:24 +00:00
Commented Dec 16, 2015 at 18:43 — hindmost
– hindmost, Commented Dec 16, 2015 at 18:43
Sorry, just added it!

Faraz Ahsan
– Faraz Ahsan

2015-12-16 18:52:34 +00:00
Commented Dec 16, 2015 at 18:52 — Faraz Ahsan
– Faraz Ahsan, Commented Dec 16, 2015 at 18:52

Community · Accepted Answer · 2017-05-23 12:10:10Z

22

If it says the API key is listed as a header, more than likely you need to set it in the headers option of your http request. Normally something like this :

headers: {'Authorization': '[your API key]'}

Here is an example from another Question

$http({method: 'GET', url: '[the-target-url]', headers: {
  'Authorization': '[your-api-key]'}
});

Edit : Just saw you wanted to store the response in a variable. In this case I would probably just use AJAX. Something like this :

$.ajax({ 
   type : "GET", 
   url : "[the-target-url]", 
   beforeSend: function(xhr){xhr.setRequestHeader('Authorization', '[your-api-key]');},
   success : function(result) { 
       //set your variable to the result 
   }, 
   error : function(result) { 
     //handle the error 
   } 
 });

I got this from this question and I'm at work so I can't test it at the moment but looks solid

Edit 2: Pretty sure you should be able to use this line :

headers: {'Authorization': '[your API key]'},

instead of the beforeSend line in the first edit. This may be simpler for you

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered Dec 16, 2015 at 18:52

Danny H

3662 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Faraz Ahsan Over a year ago

So that makes sense, but how would I incorporate this in my javascript file?

Danny H Over a year ago

Was editing my answer as your commented, hope that can clear some things up. You can just place that AJAX request wherever you need to get the information in your JS file. I personally like to have them in their own functions

Faraz Ahsan Over a year ago

I'll try it now! Thank you so much

Danny H Over a year ago

instead of using beforeSend pretty sure you can just use the headers line at the top of my answer. That may be easier and I will add it to the bottom of the answer as well

Shashank · Accepted Answer · 2018-06-08 08:56:04Z

11

With your own Code and a Slight Change withou jQuery,

function testingAPI(){ 
    var key = "8a1c6a354c884c658ff29a8636fd7c18"; 
    var url = "https://api.fantasydata.net/nfl/v2/JSON/PlayerSeasonStats/2015";
    console.log(httpGet(url,key)); 
}


function httpGet(url,key){
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", url, false );
    xmlHttp.setRequestHeader("Ocp-Apim-Subscription-Key",key);
    xmlHttp.send(null);
    return xmlHttp.responseText;
}

Thank You

answered Jun 8, 2018 at 8:56

Shashank

4355 silver badges10 bronze badges

1 Comment

Shapon Pal Over a year ago

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check xhr.spec.whatwg.org.

Collectives™ on Stack Overflow

How to send an HTTP request with a header parameter?

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related