This is a migrated thread and some comments may be shown as answers.
Multi-Select Headers to allow cors
1 Answer 7 Views
This is a migrated thread and some comments may be shown as answers.
Aubrey Ivan
Top achievements
Rank 1
Aubrey Ivan asked on 18 Nov 2019, 03:38 AM

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?

1 Answer, 1 is accepted

Sort by
0
Accepted
Veselin Tsvetanov
Telerik team
answered on 19 Nov 2019, 01:07 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Asked by
Aubrey Ivan
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Share this question
or