2

I am trying to authenticate a user using the Basic Authentication protocol in Jquery but it keeps giving error:"XMLHttpRequest cannot load https://api.credly.com/v1.1/authenticate. Request header field authorization is not allowed by Access-Control-Allow-Headers."

But when I check the API using postman client, it works fine.

Jquery Code: 

 var settings = {
  "async": true,
  "crossDomain": true,
  "url": "https://api.credly.com/v1.1/authenticate",
  "method": "POST",
  "headers": {
    "x-api-key": "myAPIkey",
    "x-api-secret": "mySECRET",
    "authorization": "Basic "+btoa(<email> + ":" + <password>)
  }
}

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

the API is working for POSTMAN client so there should be no issue in that but it is not working in Jquery. Please help.

siddhant
  • 258
  • 1
  • 3
  • 7
  • 2
    possible duplicate of ['Request header field Authorization is not allowed' error - Tastypie](http://stackoverflow.com/questions/10548883/request-header-field-authorization-is-not-allowed-error-tastypie) – D4V1D Aug 25 '15 at 08:56

1 Answers1

0

Use dataType : 'jsonp' for cross domian request, See also

 var settings = {
  "async": true,
  "crossDomain": true,
  dataType : 'jsonp',   //Cross Domain request
  "url": "https://api.credly.com/v1.1/authenticate",
  "method": "POST",
  "headers": {
    "x-api-key": "myAPIkey",
    "x-api-secret": "mySECRET",
    "authorization": "Basic "+btoa(<email> + ":" + <password>)
  }
}
Dimag Kharab
  • 4,439
  • 1
  • 24
  • 45
  • I tried jsonp but for some reason my POST request is getting displayed as GET in the chrome console – siddhant Aug 25 '15 at 10:11
  • what @siddhant ? what about other browsers / – Dimag Kharab Aug 25 '15 at 10:13
  • I have just found out that jsonp could not make a POST request see this link: http://stackoverflow.com/questions/3860111/how-to-make-a-jsonp-post-request-that-specifies-contenttype-with-jquery – siddhant Aug 25 '15 at 11:47
  • Oh yeah ! So can u use GET here, if you are ok with using this ? Does your API allow GET calls ? – Dimag Kharab Aug 25 '15 at 11:48
  • So its not possible until the other server is in your control, you can use HTTP access control to '*' to bypass that – Dimag Kharab Aug 25 '15 at 12:05
  • 1
    "access-control-allow-origin": "*" is set I am able to make successful calls using POSTMAN but not using Jquery – siddhant Aug 25 '15 at 12:09
  • Dude that meant to in api.credly.com server header – Dimag Kharab Aug 25 '15 at 12:10
  • yes it is set in the api header. I can see that in response header – siddhant Aug 25 '15 at 12:12
  • Are you providing the correct api key and secret code ? it seems the cause of error – Dimag Kharab Aug 25 '15 at 12:17
  • 1
    I am using the correct key and secret as I am able to successfully call in POSTMAN client( and even in other languages such as objective c). and if the key or secret is wrong it should give error for that and not for the header. – siddhant Aug 25 '15 at 12:24
  • @siddhant I have the same issue. I can call it successfully in POSTMAN but it does not work with the same generated code from localhost. What did you end up doing? – Mukus May 26 '16 at 02:06
  • @Mukus did you end up getting this working? – garek007 Mar 25 '21 at 17:42