GET Rest Call with Authorization Header using beforeSend not working as expected

[Ryan]

Hi All,

I have an endpoint that accepts either params username/password or Authorization Header.

I can populate my kendoDropDownList w/o issue using params. (see code below)

var dataSourceAuthorization = new kendo.data.DataSource({
    transport: {
        read: 'https://restsandbox.azurewebsites.net/services/rest/gettestdata?username=test_api_user&password=Te$tUser1',
        type: "GET"
        }
});

$("#userList").kendoDropDownList({
    dataTextField: "userId",
    dataValueField: "userNumber",
    dataSource: dataSourceAuthorization,
    optionLabel: "Select User"
});

 

but when I use Authorization header, I'm getting > GET https://restsandbox.azurewebsites.net/services/rest/gettestdata 401 (Unauthorized)

(see code below)

var dataSourceAuthorization = new kendo.data.DataSource({
    transport: {
        read: 'https://restsandbox.azurewebsites.net/services/rest/gettestdata',
        type: "GET",
        beforeSend: function (res) {
            res.setRequestHeader('Authorization', 'Bearer Te$t_T0ken');
        }
    }
});

$("#userList").kendoDropDownList({
    dataTextField: "userId",
    dataValueField: "userNumber",
    dataSource: dataSourceAuthorization,
    optionLabel: "Select User"
});

 

Please note that using same Authorization header value with Postman, its working fine. (See attached)

 

Did I use sendBefore incorrectly? Any idea why its not working with Headers?

Thanks!

Ryan

[Aleksandar]

Hi Ryan,

When configuring the transport.read configuration od the dataSource you need to provide either an object, a string or a function as a parameter. The data source uses jQuery.ajax to make an HTTP request to the remote service. The value configured via transport.read is passed to jQuery.ajax.

Having said that you need to update the transport configuration in the following manner:

 var dataSourceAuthorization = new kendo.data.DataSource({
        transport: {
          read: {
            url:'https://restsandbox.azurewebsites.net/services/rest/gettestdata',
            type: "GET",
            beforeSend: function (res) {
              res.setRequestHeader('Authorization', 'Bearer Te$t_T0ken');
            }
          }
        }
      });

 

This way the Authorization token will be sent to the remote endpoint:

Here is a dojo with an updated example. 

Regards,
Aleksandar
Progress Telerik

[Ryan]

Hi Alexsandar,

I think header is now working coz Unauthorized is now changed to "been blocked by CORS policy".

Now I've already added code below at Startup of my .net core API project (https://restsandbox.azurewebsites.net/)

app.UseCors(options => options.WithOrigins("https://localhost:44362", "https://dojo.telerik.com"));

but CORS policy still shows. Any idea to fix this?

Thanks again,

Ryan

[Aleksandar]

Hi Ryan,

The provided information is not enough to be sure what the issue is. I would advise checking the Microsoft's documentation on enabling CORS policy for further details:

https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-3.1 

Is the AddCors extension method in the ConfigureServices method configured as described in the above documentation? Also is call to UseCors placed after UseRouting but before UseAuthorization?

Regards,
Aleksandar
Progress Telerik

[Ryan]

Hi Aleksandar,

Got same results, same issue. I've used https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-2.1

 

 

Please see attached codes.

Thanks!

[Aleksandar]

Hello Ryan,

The provided configuration seems correct and I am not sure why you experience the CORS error. I would suggest investigating further the AzureWebSites CORS configuration settings:

https://docs.microsoft.com/en-us/azure/app-service/app-service-web-tutorial-rest-api

Additionally, you could check the below resources for further details on CORS configuration:

https://weblog.west-wind.com/posts/2016/sep/26/aspnet-core-and-cors-gotchas

https://dotnetcoretutorials.com/2017/01/03/enabling-cors-asp-net-core/

https://code-maze.com/enabling-cors-in-asp-net-core/

https://stackoverflow.com/questions/44379560/how-to-enable-cors-in-asp-net-core-webapi

https://www.c-sharpcorner.com/article/enabling-cors-in-asp-net-core-api-application/

Regards,
Aleksandar
Progress Telerik