This is a migrated thread and some comments may be shown as answers.

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

5 Answers 25 Views
This is a migrated thread and some comments may be shown as answers.
Ryan
Top achievements
Rank 1
Ryan asked on 08 May 2020, 03:48 PM

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: {
        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: {
        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

5 Answers, 1 is accepted

Sort by
0
Aleksandar
Telerik team
answered on 13 May 2020, 08:32 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Ryan
Top achievements
Rank 1
answered on 14 May 2020, 04:51 AM

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

0
Aleksandar
Telerik team
answered on 19 May 2020, 06:24 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Ryan
Top achievements
Rank 1
answered on 27 May 2020, 11:11 AM

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!

0
Aleksandar
Telerik team
answered on 01 Jun 2020, 10:08 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Asked by
Ryan
Top achievements
Rank 1
Answers by
Aleksandar
Telerik team
Ryan
Top achievements
Rank 1
Share this question
or