I'm attempting to use the Kendo Upload control asynchronously to an MVC controller, which passes the file to a WebApi controller. The file is uploaded successfully, however when it returns to the MVC view, it reports that the file failed to upload with the error below. We are using Azure B2C for authentication:
"Access to XMLHttpRequest at 'https... b2clogin.com...' (redirected from 'https//localhost:7074/Files/UploadFile') from origin 'https://localhost:7074' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource."
Server response:
"Failed to load resource: net::ERR_FAILED"
The control is located in a partial view as part of a tab control on a CSHTML view. Here is the code for the upload control:
<div class="row">
<div class="col-md-8">
@(Html.Kendo().Upload()
.Name("uploadedFile")
.Multiple(false)
.Validation(v =>
{
v.AllowedExtensions(new string[] { ".csv" });
v.MaxFileSize(3145728);
})
.Async(a => a
.AutoUpload(false)
.Save("UploadFile", "Files")
)
.Events(e =>
{
e.Upload("onFileUpload");
})
)
</div>
<div class="col-md-4">
</div>
</div>
Here is the C# code for the MVC controller:
[HttpPost]
public async Task<ActionResult> UploadFile(IFormFile uploadedFile, string month, string year)
{
if (uploadedFile == null || uploadedFile.Length == 0)
return BadRequest("No file uploaded.");
var reportingPeriod = month + year;
using (var content = new MultipartFormDataContent())
{
if (uploadedFile.Length > 0)
{
var streamContent = new StreamContent(uploadedFile.OpenReadStream());
streamContent.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue(uploadedFile.ContentType);
content.Add(streamContent, "file", uploadedFile.FileName);
}
using (var response = await _client.HttpClient.PostAsync("/api/Files/loadbackdatedmonthlytrueupfile/" + reportingPeriod, content))
{
if (response.IsSuccessStatusCode)
{
// Kendo expects an empty string for success
return Content("");
}
else
{
return StatusCode((int)response.StatusCode, await response.Content.ReadAsStringAsync());
}
}
}
}
Here is the code for the WebApi controller:
[HttpPost("loadbackdatedmonthlytrueupfile/{reportingPeriod}")]public async Task<IActionResult> LoadBackdatedMonthlyTrueUpFile([FromForm] IFormFile file, string reportingPeriod)
{
//other logic here
return Ok(new { file.FileName, file.Length });
}
This is the info I received from Copilot:
Root cause:
• The /authorize endpoint is designed for browser redirects, not AJAX/fetch/XHR.
• No CORS headers will ever be present on this endpoint, so preflight requests will always fail.
How to fix:
• Never use AJAX/fetch/XHR to call the /authorize endpoint.
• Always use a full-page redirect for authentication.
For example, set window.location.href to the login URL, or let the [Authorize] attribute and OIDC middleware handle it for you.
How can I configure this upload control to return to the view without the error (attaching screenshot)?