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 Dec 16 '15 at 18:43 — hindmost, Dec 16 '15 at 18:43

score 22 · Accepted Answer · edited May 23 '17 at 12:10

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 '17 at 12:10

Community

1
1

answered Dec 16 '15 at 18:52

Danny H

366
2
7

So that makes sense, but how would I incorporate this in my javascript file? – Faraz Ahsan Dec 16 '15 at 18:54
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 – Danny H Dec 16 '15 at 19:01
I'll try it now! Thank you so much – Faraz Ahsan Dec 16 '15 at 19:03
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 – Danny H Dec 16 '15 at 19:04

score 10 · Answer 2 · answered Jun 08 '18 at 08:56

10

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 08 '18 at 08:56

Shashank

425
5
10

3

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/. – Shapon Pal Mar 25 '19 at 11:54

score -1 · Answer 3 · answered Feb 03 '23 at 07:29

-1

**`

U need to have a

send(); Statement.

That way you can send the request to the site server.

`**

answered Feb 03 '23 at 07:29

Mike

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 05 '23 at 04:17

How to send an HTTP request with a header parameter?

3 Answers3

Linked