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: developer.mozilla.org/en-US/docs/HTTP/… — Ray Nicholus
– Ray Nicholus, Commented Oct 24, 2013 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
– HelloWorld, Commented Oct 24, 2013 at 17:01

Community · Accepted Answer · 2017-05-23 12:34:14Z

4

+100

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, 2017 at 12:34

CommunityBot

11 silver badge

answered Oct 24, 2013 at 17:34

stefan2410

2,0512 gold badges17 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

HelloWorld Over a year ago

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 Over a year ago

I have just seen you have also: jQuery.support.cors = true; so I guess this is the same as crossDomain = true like I set?

stefan2410 Over a year ago

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 Over a year ago

Are you sure that your service is configured for CORS like here ? the request from fiddler is only the OPTIONS.

HelloWorld Over a year ago

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.

|

Collectives™ on Stack Overflow

ajax jquery cross domain call does not send authorization header

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related