Cross domain request with header authentication

Question

I need to send a Get request with cross domain origin with header authentication.

Its working fine in Chrome and Firefox, but I'm having issues in Safari and IE. Also in random cases it returns 401.

<script>
var url = 'username:password@anotherdomain.com';
$.ajax({
    url: url,
    dataType: 'jsonp',
    jsonpCallback: "callback",
    success: function(json) {
        alert(json);
    }
});
</script>

What would be the best option to solve this?

You get that "random" 401 with Firefox or Chrome or do you get it with Safari and IE? Is there a pattern to it? Like it is the url would be missing the appropriate protocol. You could use `console.log` rather than `alert` to get the contents of the JSON variable. — Seth, Dec 23 '16 at 07:59
For Safari and IE, it is not even get executed and nothing show up in console. now i found that IE do not support user name and password in URL https://support.microsoft.com/en-in/kb/834489 , so i am looking for any other way do have ajax call which support cross origin with header authentication — magento2new, Dec 23 '16 at 09:05
You can refer this question http://stackoverflow.com/questions/9559947/cross-origin-authorization-header-with-jquery-ajax I hope it will helpful. — Arpit Kumar, Dec 31 '16 at 05:39
First of all this is NOT header authentication. But if you do need to send a HTTP header you may want to read this: http://stackoverflow.com/questions/5507234/how-to-use-basic-auth-with-jquery-and-ajax — Tudor Ilisoi, Dec 31 '16 at 18:12
An alternative will be to use a reverse proxy (e.g. Nginx) and avoid the cross-domain issue completely. — samsonthehero, Jan 01 '17 at 20:36
There is a server side solution for accepting all cross domain calls. So that you don't need to set any header for accepting cross domain calls on your request object. I can provide the solution if you are interested. — Nishad K Ahamed, Jan 02 '17 at 04:39
we ended up removing authentication from header and directly use server side validation. Thanks all for your feedback — magento2new, Jan 02 '17 at 05:24

score 2 · Accepted Answer · answered Jan 01 '17 at 14:46

2

If I have understood the question correctly, you could use the beforeSend callback to add basic authentication on the request. This is irrelevant of jsonp or cross-origin though.

beforeSend: function (xhr) {
  xhr.setRequestHeader ("Authorization", "Basic " + btoa(username + ":" + password));
}

https://jsfiddle.net/rn9Lp304/

answered Jan 01 '17 at 14:46

Kevin Farrugia

6,431
4
38
61

Kevin, Not sure if I have miss something when I tried with like this before. Its working fine . Thanks – magento2new Jan 02 '17 at 05:40

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

For Internet Explorer 8 and 9 you need to use XDomainRequest Object

Internet Explorer 10+ does the cross domain requests normally like all the other browsers.

As mentioned in the documentation you need to

create an object of the XDR using var xdr = new XDomainRequest();
open the connection using the get method using xdr.open("get", "username:password@anotherdomain.com");
send the data back to the server using xdr.send();

The complete code reference can be shown as on this thread by @Mark Pieszak

as a workaround to set the username and the password in the internet explorer you can set the following

DWORD for iexplore.exe to 0 in: [HKEY_LOCAL_MACHINE\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_HTTP_USERNAME_PASSWORD_DISABLE].

score 0 · Answer 3 · answered Jan 01 '17 at 20:00

I will recommend you to try two things:

In ajaxSetup, do this:

$.ajaxSetup({
    ....,
    xhrFields: {
       withCredentials: true
    },
    crossDomain: true,
    ....
});

In your ajax requests, set the full url like so, in addition to the credentials flag.

'Access-Control-Allow-Origin: https://not-example.com'
'Access-Control-Allow-Credentials: true'

For servers with authentication, these browsers do not allow "*" in this header. The Access-Control-Allow-Origin header must contain the value of the Origin header passed by the client.

score -3 · Answer 4 · answered Jan 01 '17 at 19:03

-3

use getJSON

$.getJSON("url",function (data) {/*code here*/});

answered Jan 01 '17 at 19:03

A7S

141
1
8

$.getJSON() is a shorthand for the $.ajax() jQuery method, were it to solve the issue an explanation would still be required as to why it solves it – Greenstick Jan 02 '17 at 05:31

Cross domain request with header authentication

4 Answers4

Linked