How do I set my request headers?

Question

I am trying to pull data from an api using jquery but I am receving an error

Failed to load resource: the server responded with a status of 401 (Unauthorized)

I have set the url as follows

url: "https://jsonodds.com/api/odds/soccer"

and I've tried setting the header two different ways,

firstly

headers: {
                    'JsonOdds-API-Key', key
}

and also using the beforesend function

beforeSend: function (xhr) {
                        xhr.setRequestHeader("JsonOdds-API-Key", key);
                    }

I already have my key defined. I have tested the url and header on postman and it returns data could it be a problem with other code I have wrote?

headers: { 'JsonOdds-API-Key', key } its not a comma you need here its a colon. — Webbanditten, Apr 19 '17 at 12:42
`headers: { 'JsonOdds-API-Key': key }` Note `:`, not `,`. Whenever you see issues in JS you should always check the console first - you'd have seen a syntax error in this case. — Rory McCrossan, Apr 19 '17 at 12:43

score 1 · Answer 1 · edited May 23 '17 at 12:17

An example of an ajax call in jQuery:

      $.ajax({
         url: "https://jsonodds.com/api/odds/soccer",
         data: { signature: authHeader },
         type: "GET",
         beforeSend: function(xhr){xhr.setRequestHeader('JsonOdds-API-Key', key);},
         success: function() { alert('Success!'); }
      });

I posted a full example because in the OP i saw separate parts of the call, I wanted to make sure you built it correctly.

Hope it helps!

Update 1:

data: {}

Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key based on the value of the traditional setting

Check the documentation, it will be your guideline for your coding success: http://api.jquery.com/jquery.ajax/

Also, this post can be very useful for you: How do I return the response from an asynchronous call?

Cheers! ;)

What is the data: { signature: authHeader } line? I am new to jquery sorry if it is something simple — DaveReg, Apr 19 '17 at 13:35
@DaveReg hello friend! Check my update! ;) I suggest you check the documentation. ;) — SrAxi, Apr 19 '17 at 14:15
I have tried every way I can think and I still get this error. Can you try the following key, 24c00f23-2457-11e7-b6b0-0afc106a1b07. I'm almost sure it is the correct key but so I know I am not wasting my time — DaveReg, Apr 19 '17 at 15:55

MrGoofus · Answer 2 · 2017-04-19T18:20:16.317

This code should work;

$.ajax({ 
    url: 'https://jsonodds.com/api/odds/soccer', 
    headers: { 
        'JsonOdds-API-Key': key 
    } 
});

The 401 error can be also be a result of malformed API-key. Please check it is correct, you can see if the custom header is sent, by opening developer tools -> Network -> Filter for 'api/odds/soccer' -> Click the request -> Scroll on the right and check Request headers section.

UPDATE

That API do not allow regular front-end ajax calls as they require the ApiKey as a header and do not allow Cross Domain requests. To get around the cross domain requests, you could send JSONP request, but you cannot send custom headers with JSONP request so you can't go around the cross domain issue if you have to send custom header (api key).

(index):1 XMLHttpRequest cannot load https://jsonodds.com/api/odds/soccer. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.finnair.com' is therefore not allowed access. The response had HTTP status code 401.

The Api Key is correct when testing Curl. Paste following in terminal;

curl -X GET https://jsonodds.com/api/odds -H "JsonOdds-API-Key: yourapikey"

You need to handle the calls to the Api with some server side solution, e.g. NodeJS or PHP.

I still get the 401 error. Is there anything else you know that may cause this? While I have other code wrote it is the only error I am receiving. — DaveReg, Apr 19 '17 at 13:07
Yes the api key is correct. when I go to the developer tools and filter for 'api/odds/soccer' nothing appears though — DaveReg, Apr 19 '17 at 14:11
Thanks for that @Riku just one more question then, can these calls be handled in asp.net mvc? — DaveReg, Apr 20 '17 at 15:20

How do I set my request headers?

2 Answers2