ajax jquery cross domain call does not send authorization header

Question

Before I am doing a cross domain call to a server with service stack I am successfully authenticated and get my token.

Now I want to do another call to retrieve data:

$.ajax({
    beforeSend: function(xhr) {                  
        xhr.setRequestHeader('Authorization', 'Basic ' + getToken());   
    },
    type: "GET",
    url: requestUrl,
    xhrFields: {
        withCredentials: true
    },  
    async: true,
    dataType: 'json',
    crossDomain: true
})

When I look in my google chrome dev tools console I see this:

OPTIONS http://MyPc.company:82//customers 404 (Not Found) 
OPTIONS http://MyPc.company:82//customers Invalid HTTP status code 404 

XMLHttpRequest cannot load http://MyPc.company:82//customers. 
Invalid HTTP status code 404 (index):1

When I look into fiddler I see this request:

Inspectors => Auth: No Authorization Header is present.

Inspectors => Raw:

OPTIONS http://MyPc.company:82//customers HTTP/1.1
Host: MyPc.company:82
Connection: keep-alive
Cache-Control: no-cache
Pragma: no-cache
Access-Control-Request-Method: GET
Origin: http://MyPc.company
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36
Access-Control-Request-Headers: access-control-allow-origin, accept, access-control-allow-headers, authorization, access-control-allow-methods, content-type
Accept: */*
Referer: http://MyPc.company/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4

Why is the authorization header not sent? That seems at first sight the origin problem to me.

You have no control over the headers sent with a preflight (OPTIONS) request. Read up on preflighting here: https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS#Preflighted_requests — Ray Nicholus, Oct 24 '13 at 15:45
@RayNicholus "... since a custom header is set, this request is preflighted." So now I know I do a preflight request because I use an authorizationheader? But how else can sent back the token to the token to check it? — HelloWorld, Oct 24 '13 at 17:01
Can you read this [answer](http://stackoverflow.com/questions/18991417/accessing-servicestack-authenticated-service-using-ajax/19006908#19006908) , maybe it solves your problem. — stefan2410, Oct 24 '13 at 17:25

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

4

In JavaScript

     jQuery.support.cors = true;

   function make_base_auth(user, password) {
      var tok = user + ':' + password;
      var hash = btoa(tok);
      return "Basic " + hash;
  }
   function DoTest() {
          var TestRequest = new Object();
          TestRequest.name = "Harry Potter";             
          TestRequest.Id = 33;
         var username = "admin";
         var password = "test"; 
      $.ajax({
          type: 'Post',
          contentType: 'application/json',
          cache: false,
          async: false,
          url: serverIP + '/TestAPI/'+ TestRequest.Id,
          data: JSON.stringify(TestRequest),
          dataType: "json",                  
          beforeSend: function (xhr) {                    
           xhr.setRequestHeader("Authorization", make_base_auth(username, password));
          },
       success: function (response, status, xhr) {
              var s= response.message;      
          },
          error: function (xhr, err) {
              alert(xhr.statusText);
          }
      });
  }

Service configuration should be enabled for CORS like

              Plugins.Add(new CorsFeature(allowedHeaders: "Content-Type, Authorization"));

maybe my previous answer can help you.

Or even better the following blog post from Community Resources

CORS BasicAuth on ServiceStack with custom authentication

edited May 23 '17 at 12:34

Community

1
1

answered Oct 24 '13 at 17:34

stefan2410

1,931
2
16
21

I have compared your JS code with mine and everything which is important seems the same except you have not set crossDomain = true. When I look at your Servicestack configuration you are right I can not remember that the CorsFeature has Authorization as allowedHeaders set but I doubt that this is my problem. My problem is that no header is sent at all that means I can configure what I want on server side right? But still I will check my service configuration with your hint. – HelloWorld Oct 24 '13 at 18:44
I have just seen you have also: jQuery.support.cors = true; so I guess this is the same as crossDomain = true like I set? – HelloWorld Oct 24 '13 at 18:49
I think it is the service configuration. If you comment out the attribute [Authenticate] from your service, does it work normally ? About jQuery.support.cors = true; yes. – stefan2410 Oct 24 '13 at 18:54
Are you sure that your service is configured for CORS like [here](http://stackoverflow.com/questions/18923930/sending-data-to-servicestack-restful-service-getting-access-is-denied/18927067#18927067) ? the request from fiddler is only the OPTIONS. – stefan2410 Oct 24 '13 at 19:28
I have tried this now on server side: Plugins.Add(new CorsFeature(allowedOrigins: Settings.Default.SmartAllowedCorsOrigin, allowCredentials: true, allowedHeaders: "Authorization")); but the authorize header is not sent as I mentioned before and that is the original problem. – HelloWorld Oct 25 '13 at 10:59
Sorry, I have not understood if the service runs without authentication. I suppose yes. If not tested, can you remove the attribute [Authenticate] from service header and try to check if there is problem with CORS. Can you edit your configuration code in the end of your question ? in my previous [answer](http://stackoverflow.com/questions/18991417/accessing-servicestack-authenticated-service-using-ajax/19006908#19006908) I had a full example. Did you try it, to see if it works ? Sorry that I cannot help you in more detail. – stefan2410 Oct 25 '13 at 15:16
Not hany service has the Authenticate attribute. I have posted a new question here to get more understanding: http://stackoverflow.com/questions/19632087/should-i-do-subsequent-authentication-ajax-requests-to-a-cross-origin-domain – HelloWorld Oct 28 '13 at 10:16
Yes, you did very well with the new question. But without the Authenticate attribute, authentication does not work, in any case. I have not even undestood till now, if your simple CORS work. Of course, maybe your problem is different. Good Luck. Maybe this [blog post](http://joeriks.com/2013/01/12/cors-basicauth-on-servicestack-with-custom-authentication/), can help you. – stefan2410 Oct 28 '13 at 11:14
my server architect said we do not use authentication attribute but permissions in servicestack. I deleted the new question and created this: http://stackoverflow.com/questions/19652547/servicestack-options-404-and-cors-origin maybe it interests you. – HelloWorld Oct 29 '13 at 08:17
Why don't you say to your server guy, to give you a working test for the client ( I do the same with my team) . About [CORS](http://stackoverflow.com/questions/18923930/sending-data-to-servicestack-restful-service-getting-access-is-denied/18927067#18927067) – stefan2410 Oct 29 '13 at 11:57

ajax jquery cross domain call does not send authorization header

1 Answers1