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

6 posts, 0 answers
  1. Ryan
    Ryan avatar
    91 posts
    Member since:
    Aug 2012

    Posted 08 May 2020 Link to this post

    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

  2. Aleksandar
    Admin
    Aleksandar avatar
    242 posts

    Posted 13 May 2020 Link to this post

    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.
  3. Ryan
    Ryan avatar
    91 posts
    Member since:
    Aug 2012

    Posted 13 May 2020 in reply to Aleksandar Link to this post

    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

  4. Aleksandar
    Admin
    Aleksandar avatar
    242 posts

    Posted 19 May 2020 Link to this post

    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.
  5. Ryan
    Ryan avatar
    91 posts
    Member since:
    Aug 2012

    Posted 27 May 2020 in reply to Aleksandar Link to this post

    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!

  6. Aleksandar
    Admin
    Aleksandar avatar
    242 posts

    Posted 01 Jun 2020 Link to this post

    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.
Back to Top