Ajax Request in chrome(Only in Chrome)

Question

Jquery ajax requests works fine in IE but it gives a below error in chrome

   XHR failed loading: OPTIONS http://someurl/
   send @ jquery.min.js:2
   ajax @ jquery.min.js:2
   (anonymous) @ index.html:6

event after adding below parameters header

  $.ajax({
            beforeSend: function (xhr) {
                xhr.setRequestHeader ("Authorization", "Basic " + btoa("user" + ":" + "passoword"));
            },
            url: 'url',
            type: 'get',
            contentType:'text/html',
            headers: {
             'Access-Control-Allow-Origin': '*',
             'Access-Control-Allow-Methods': 'OPTIONS, HEAD, GET, POST, PUT, DELETE'                  
            },

            success: function( data, textStatus, jQxhr ){
                alert(data);
                $('#idc').html( data );
            },
            error: function( xhr, textStatus, errorThrown ){
                alert(errorThrown+xhr.status+textStatus);
            }
        });

Application uses basic authentication and it works fine in ie but in chrome it is not picking the credentials and redirecting to other url where credentials needs to be entered. I gone through all the urls in stackoverflow but nothing worked

Could you provide some sample code (javascript) please? Also: CORS headers like `Acces Control Allow Origin` and `Access Control Allow Methods` are meant to be implemented serverside, and not to be included in the Request headers of your AJAX. — BRO_THOM, Mar 28 '18 at 12:26
Did you add the `'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'GET, POST, PUT',` in the backend on the server side? — Guntram, Mar 28 '18 at 12:27
Add the code used to that `ajax request`, without it, and only with the respond, it's difficult to guess what's going on. — gmo, Mar 28 '18 at 12:27
There is no need to send `Access-Control-Allow-Origin` from the frontend, it must be allowed in the backend... — Guntram, Mar 28 '18 at 12:32
`headers: { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'OPTIONS, HEAD, GET, POST, PUT, DELETE' },` putting this in your request makes no sense. Only the server can set these options. They belong in the _response_, not the _request_. Check the MDN documentation for these headers, it mentions they are server-only headers. Only the server gets to decide what methods it accepts, and what origins it allows CORS for. You, as the caller, can't decide that - or else what would be the purpose of CORS at all? — ADyson, Mar 28 '18 at 12:32
Possible duplicate of [jquery.ajax Access-Control-Allow-Origin](https://stackoverflow.com/questions/19085965/jquery-ajax-access-control-allow-origin) — Ritul Lakhtariya, Mar 28 '18 at 12:33
Start reading from here: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS — ADyson, Mar 28 '18 at 12:34
Start by removing `headers: { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'OPTIONS, HEAD, GET, POST, PUT, DELETE' },` which will create preflights that are not working with AUTH — mplungjan, Mar 28 '18 at 12:39
@RitulLakhtariya : This is not related to question which is there in that link which you shared. So dont mark it as duplicate. — Prasad, Mar 28 '18 at 12:53

score 1 · Answer 1 · answered Mar 28 '18 at 12:45

Try this :)

$.ajax({
  xhrFields: {
    withCredentials: true
  },
  headers: {
    Authorization: "Basic " + btoa("username:password")
  },
  url: "url",
  type: 'GET',
  success: function(data, textStatus, jQxhr) {
    alert(data);

  },
  error: function(xhr, textStatus, errorThrown) {
    alert(errorThrown + xhr.status + textStatus);
  }
});

score 0 · Answer 2 · answered Mar 28 '18 at 12:53

0

you can add some code in htaccess

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"

answered Mar 28 '18 at 12:53

Ritul Lakhtariya

362
1
16

Ajax Request in chrome(Only in Chrome)

2 Answers2