Multi-Select Headers to allow cors

[Aubrey Ivan]

I am using telerik asp.net mvc and I have a multi select:

                                @(Html.Kendo().MultiSelect()
                                                .Name("msInvoicesAPV")
                                                .Placeholder("Select invoices...")
                                                .HtmlAttributes(new { required = "required", style = "width: 100%", validationmessage = "Select Invoice Numbers." })
                                                .DataTextField("Number")
                                                .DataValueField("Id")
                                                .AutoBind(true)
                                                .DataSource(source =>
                                                    {
                                                        source.Read(read =>
                                                        {
                                                            read.Action("GetInvoicesByDateTimeRange", "Invoices")
                                                            .Data("getDateTimeRangeParameters");
                                                        })
                                                        .ServerFiltering(true);
                                                    })
                                )

now it is reading from a controller called Invoices and the action name is GetInvoicesByDateTimeRange

 

        public ActionResult GetInvoicesByDateTimeRange(string start, string end)
        {
            var session = Session["AccessToken"];

            try
            {
                DateTime startRange = Convert.ToDateTime(start);
                DateTime endRange = Convert.ToDateTime(end);

                string query = $"Type == \"ACCPAY\" AND Date >= DateTime({startRange.Year},{startRange.Month},{startRange.Day})" +
                    $" AND Date <= DateTime({endRange.Year},{endRange.Month},{endRange.Day})";

                var invoices = _xeroCoreApi.Invoices.Where(query).Find();

                return Json(invoices, JsonRequestBehavior.AllowGet);
            }
            catch (RenewTokenException e)
            {
                return RedirectToAction("Connect", "XeroOAuth");
            }
        }

as you can see, whenever it went to the catch part, I am redirecting it to another Action and controller

 

        public ActionResult Connect()
        {
            var authorizeUrl =  _authenticator.GetRequestTokenAuthorizeUrl(_user.Name);

            return Redirect(authorizeUrl);
        }


but I am getting errors of :
"Access to XMLHttpRequest at 'https://api.xero.com/oauth/Authorize?oauth_token=KNFURSOK8ZPTF1AMUKYQHT2E85FPTQ&scope=' (redirected from 'http://localhost:57141/Invoices/GetInvoicesByDateTimeRange?start=5%2F9%2F2019&end=11%2F19%2F2019') from origin 'http://localhost:57141' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request."

do I need to add "Access-Control-Allow-Origin:" as a header of the read property? if so how do I add it?

[Veselin Tsvetanov]

Hello Aubrey Ivan,

The MultiSelect Read request will send an AJAX request to the controller action, that would expect a JSON to be returned. Having that said, instead of redirecting directly from that action, I would suggest you return an error, attach an event handler for the DataSource Error event and redirect there to the required Controller action. Here is how to attach the DataSource event handler:

@(Html.Kendo().MultiSelect()
	.Name("msInvoicesAPV")
...
	.DataSource(source =>
	{
		source.Read(read =>
		{
			read.Action("GetInvoicesByDateTimeRange", "Invoices")
			.Data("getDateTimeRangeParameters");
		})
		.ServerFiltering(true)
		.Events(e => e.Error("onError"));
	})
)

and:

function onError(e) {
	window.location = '@Url.Action("Connect", "XeroOAuth")'
}

Alternatively, you could use a JavaScript result as explained in the following StackOverflow thread.

Regards,
Veselin Tsvetanov
Progress Telerik