CORS issue while using APP throught Azure Proxy after an hour (AppProxyAccessCookie)

Dylan James 46

tl;dr - The application gives a CORS error after an hour if page is left idle.

We have an internal app that is accessible to the external network using Azure App Proxy, the application uses Azure MSAL (OpenID connect)for AD and MFA authentication.
We are using MSAL to get token and refresh it every 50mins (Since the token gets expired after an hour).
The application stores AzureAppProxyAccessCookie that disappears after an hour which is causing the CORS error for the resource request.

Wanted to know how i could update the AccessCookie stored in the browser so that the browser doesn't throw CORS error. Looked through a lot of docs, but couldn't figure it out, would appreciate some help from this community.

I have referred these docs:
cors
application-proxy-configure-native-client-application
active-directory-configurable-token-lifetimes
application-proxy-configure-cookie-settings

Alfredo Revilla - Upwork Top Talent | IAM SWE SWA 27,491 Reputation points

2020-08-12T16:20:03.163+00:00

@Dylan James what url is causing the CORS error? What is the error detail?
Dylan James 46 Reputation points

2020-08-30T17:10:16.33+00:00

@alfredo-revilla-msft Thanks for your response.

The below URL is causing the CORS issue;
Navigating to the login URL is causing the CORS issue, from the application.

Below is the error detail:
Access to XMLHttpRequest at 'https://login.microsoftonline.com/<tenat-id>/oauth2/authorize?response_type=code&client_id=<client-id>&scope=openid&nonce=<nonce>&redirect_uri=<redirect-uri>OriginalRawUrl<URL>&<client-request-id> (redirected from <Source URL, domain A>) from origin <Domain A> 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.

Still stuck on the issue :(
Alfredo Revilla - Upwork Top Talent | IAM SWE SWA 27,491 Reputation points

2020-08-31T22:33:24.38+00:00

What writes the AzureAppProxyAccessCookie? Why do you think its related to the CORS issue? What kind of application is this? webpp? webapp? spa?
Sascha Wenninger 1 Reputation point

2020-09-03T16:48:30.133+00:00

Hi folks,
Same issue here: HTML5 app behind Azure AD App Proxy. The app sends an XHR every 90 sec to check for data. All is well until 60 mins after the initial access.

App Proxy clears (by set-cookie of empty value and an expiry in the past) the browser's AzureAppProxyAccessCookie, and serves a 302 Redirect to https://login.microsoftonline.com/{tenant}/oauth2/authorize...

Before following the redirect, Chrome sends a CORS pre-flight OPTIONS request to that URL, but in the response doesn't find the Access-Control-Allow-Origin header that it appears to be looking for, and thus fails the request with the following Console log entry:

Access to XMLHttpRequest at 'https://login.microsoftonline.com/... (redirected from 'https://{URL}') from origin 'https://{origin}' 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.
Alfredo Revilla - Upwork Top Talent | IAM SWE SWA 27,491 Reputation points

2020-09-03T18:59:55.543+00:00

@Dylan James , @Sascha Wenninger , I'm reaching within the product team about this and will come back to you.
Dylan James 46 Reputation points

2020-09-05T08:31:51.833+00:00

This cookie gets added by Azure App Proxy, (in intranet it is not created).

Deleting this cookie gives us CORS issue, this cookie gets automatically removed after the 1hr time frame.

The application is a web app.
Dylan James 46 Reputation points

2020-09-07T06:17:06.383+00:00

Thanks @alfredo-revilla-msft

Looking forward to your response.
Jeremy Martin 6 Reputation points

2022-01-25T04:11:15.837+00:00

Hi,

I know this is an old thread but did you ever solve this?
Rob 26 Reputation points

2023-03-28T12:44:19.38+00:00

Hi,

Did you guys ever manage to fix this? Thanks
GonWild 426 Reputation points

2023-12-14T07:45:20.6+00:00

I also have this question
Alfredo Revilla - Upwork Top Talent | IAM SWE SWA 27,491 Reputation points

2023-12-14T16:53:00.01+00:00

Hello @GonWild , due to the original post being old, please post a new question and mention me.

Accepted answer

Alfredo Revilla - Upwork Top Talent | IAM SWE SWA 27,491 Reputation points

2020-09-07T15:18:31.027+00:00

https://login.microsoftonline.com/{tenant}/oauth2/authorize does not support CORS. The work around is to Extend the lifetime of the access token.

--
Please let us know if this answer was helpful to you. If so, please remember to mark it as the answer so that others in the community with similar questions can more easily find a solution.
Please sign in to rate this answer.

3 people found this answer helpful.
TillmannB 1 Reputation point

2021-01-08T16:25:38.29+00:00

We are basically facing the same issue.

We have two Angular applications and some further API endpoints which we protect via internal proxy utilizing OAuth2 (OAuth2-Proxy). Works fine internally.

Recently we had to make part of it accessible externally and are using the AAP for that purpose.

Unfortunately the same CORS problem appears. After 1 hour it seems the Token expires. Any subsequent API call seems to cause a redirect to login.microsoftonline.com which causes a CORS error.

From the accepted answer I understand that a workaround would be to extend the lifetime by refreshing the token. I guess we could build such a workaround into our Angular application, but I'm not clear on how to get the Refresh Token. The AAP Cookie seems encrypted. I'm not clear on how and where to get the Refresh Token.

Any further guidance would be helpful.

Thanks
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

1 additional answer

Hargitai Tamas 0 Reputation points

2024-04-01T19:47:45.63+00:00

Hi All,

have you ever resolved this issue? The same thing happening to our application now. What is the reason and how to solve this problem can anyone help me? Truly appreciated.
Please sign in to rate this answer.
Hargitai Tamas 0 Reputation points

2024-04-02T10:07:38.45+00:00

In case anyone comes here, here is a few information I have found during my research:

The "AzureAppProxyAccessCookie" is either valid for 60 minutes, or if you go to your Application Proxy settings, and uncheck Persistent Cookie. This will make your AzureAppProxyAccessCookie to be valid until the end of your session.

Still, end of session is not really enough, because you will still receive the CORS errors. So what I did is the following. I am using vue js 3 as an SPA, and laravel as a backend API. In my Vue JS application, I have placed the following code inside my axios file:

import Cookies from 'js-cookie' axiosInstance.interceptors.response.use( (response: AxiosResponse) => { return response }, async (error: AxiosError) => { // Key part if (error.code === 'ERR_NETWORK' || error.code === 'ECONNABORTED') { location.reload() } //...

Now it checks if there is a "network-related" error and does a reload. Might not be the best solution, but so far this worked for us well.

Rahul Raj 0 Reputation points

2024-06-13T09:35:00.54+00:00

hi we are facing same issue, just needed to ask where did you write this code? I mean when are you checking this thing? on every api call? or on redirects? or have you set any interval?

Hargitai Tamas 0 Reputation points

2024-06-13T09:39:38.6366667+00:00

Hello, I think it is fine to check whether this cookie is set on every API call.

Hargitai Tamas 0 Reputation points

2024-06-13T09:40:30.38+00:00

Hello, I think it is fine to check the existence of the cookie on every api call.

Rahul Raj 0 Reputation points

2024-06-14T03:57:53.8666667+00:00

how about we write a middleware in frontend and constantly check for 302 status response from he api on every api call. In such cases we do window.reload()?
302 redirect triggers every issue.
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

CORS issue while using APP throught Azure Proxy after an hour (AppProxyAccessCookie)

1 additional answer

Your answer