Error Description

“Response to the preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://<<yourazureWebApp.net>>” is therefore not allowed access “

Application Landscape

The application landscape where I have experienced this error is,

Issue

How to fix the Error

The process to fix the error was a bit tricky but not that complicated. The process to fix this issue involved a JavaScript implementation within a Partial View within an Iframe with a sequence of Activities which was

Implementation of the Partial View’s Iframe

  1. Invoke a specific controller to get the current Token Expiry Time
  2. Convert the specific time to UTC
  3. Call another JavaScript function to pass the Token Expiry time to calculate the Refresh time (Refresh Time = Current Token Expiry Time – 15 minutes) considering that the token had to be renewed 15 minutes before the expiry
  4. Ensure to call another controller to force the sign in and issue a new access token
  5. Ensure that the Iframe is refreshed as per the Refresh Time
  6. Utilize the Partial View across various other generic views which require silent token refresh based on Iframe within them

The implementation within the Partial View is as below,

  1. <iframe id="renewSessionIFrameImplementation" hidden></iframe>
  2. <script>
  4. GetTokenExpiryFunction();
  5. //Function that will retreive the current token expiry time
  6. function GetTokenExpiryFunction () {
  7. $.ajax({
  8. type: "POST",
  9. traditional: true,
  10. async: true,
  11. //Invoke the specific controller to retrieve the current issued tokens expiry time
  12. url: "/<<Controller>>/GetCurrentTokenExpirySchedule",
  13. context: document.body,
  14. success: function (result) {
  15. if (result) {
  16. //convert the result from controller to UTC format
  17. var tokenExpiresOnSchedule = ConvertUTCtoLocalTime(result);
  18. //Retrieve the actual refresh interval by passing the current expiry time
  19. RefresIframeImplementation(tokenExpiresOnSchedule);
  20. }
  21. },
  22. error: function (xhr) {
  23. console.log("Error :" + xhr);
  24. }
  25. });
  26. }
  29. function ConvertUTCtoLocalTime(UTCString) {
  30. var newDate = new Date(UTCString);
  31. newDate.setMinutes(newDate.getMinutes() - newDate.getTimezoneOffset());
  32. return newDate;
  33. }
  35. //Function which will renew the token based on refresh interval
  36. function RefresIframeImplementation(CurrentTokenExpiryTime) {
  37. //calculate the refresh interval, in this case will be -15 minutes before token expiry
  38. var refreshTimeIntervel = moment(CurrentTokenExpiryTime).subtract(15, 'minutes').toDate();
  39. //arrive at the time in milliseconds to refresh the Iframe
  40. var milliSecondstoRefresh = refreshTimeIntervel - new Date();
  41. //Invoke the SetInterval function to refresh the IFrame within this view to refresh the token by
  42. //Forecefully signing in
  43. var refreshIframeInterval = setInterval(function () {
  44. @if (Request.IsAuthenticated) {
  46. <text>
  47. //Clear existing refresh interval
  48. clearInterval(refreshIframeInterval);
  49. //Get teh Iframe ID to refresh the current Iframe
  50. var element = window.parent.document.getElementById("renewSessionIFrameImplementation");
  51. //Invoke the controller to renew access token
  52. var renewUrl = "/<<Controller>>/EnsureForcedSignIn";
  53. console.log("sending request to: " + renewUrl);
  54. element.src = renewUrl;
  55. </text>
  56. }
  57. else {
  58. <text>
  59. console.log("No renewal attempt without a valid session");
  61. </text>
  62. }
  63. }, milliSecondstoRefresh);
  65. }
  67. </script>

The Controller (GetCurrentTokenExpirySchedule) Implementation to Get the Current Access Token’s Refresh Time is as below,

  1. public static async Task<string> GetAppUserTokenExpiryDate(string resourceID)
  2. {
  4. string currentTenantID = ClaimsPrincipal.Current.FindFirst("http://schemas.microsoft.com/identity/claims/tenantid").Value;
  5. string userObjectID = ClaimsPrincipal.Current.FindFirst("http://schemas.microsoft.com/identity/claims/objectidentifier").Value;
  6. AuthenticationContext authContext = new AuthenticationContext("Azure AD instance & Tenant", new NaiveSessionCache(userObjectID));
  7. ClientCredential credential = new ClientCredential("Your Client ID", "<<Your App Key");
  9. var result = await authContext.AcquireTokenSilentAsync(resourceID, credential, new UserIdentifier(userObjectID, UserIdentifierType.UniqueId));
  10. if (result == null)
  11. {
  12. return null;
  13. }
  14. return result.ExpiresOn.UtcDateTime.ToString();
  15. }

Note that the resourceID is the Microsoft Graph API URL - https://graph.microsoft.com

The Controller Implementation (EnsureForcedSignIn) to Force issue of new Access Tokens is as below,

  1. public void EnsureForcedSignIn()
  2. {
  3. // Send an OpenID Connect sign-in request.
  4. HttpContext.GetOwinContext().Authentication.Challenge(new AuthenticationProperties { RedirectUri = "/" },OpenIdConnectAuthenticationDefaults.AuthenticationType);
  5. }