I am running into the strangest issue when promoting my working code from QA to Production, while switching from a Development Auth0 tenant to Production one.
This is a Blazor application written by a development team and it using a silent authentication process.
When I go to the Production site https://app.enroute.co I am receiving the following Console messages in the browser:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://auth.enroute.co/.well-known/openid-configuration. (Reason: header ‘request-id’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response).
What is interesting is that after receiving the above message, if I simply navigate to the application URL again, I am logged in, it does a code exchange, and the application works perfectly and I no longer see those Console messages in the browser.
I have the URL is the Allowed Callback URLs, Allowed Web Origins, and Allowed Origins (CORS). My QA site is only using Allowed Callback URLs.
For the Production site, I created a test user test@enroute.co / 4NewYear1234! so you can see the exchange.
Once you see the message There was an error trying to log you in: ‘There was an error signing in.’ then just open a tab and go to https://app.enroute.co/ and you will be logged in.
I was able to get to your site without any issues. Maybe its your browser’s cache conflicting with the QA environment. Try logging in in a different browser or incognito mode.
I’ve already tried that. For me it happens on all of my browsers both on MacOS computer and my Windows computer at work. It also happens on my iPad. For one of my developers, it only happens on Microsoft Edge browser. For another developer, it doesn’t happen on any browsers.
I just went to Chrome, removed all Cookies and Cache of for all time, opened incognito mode and I still see those messages in the Console log and the app won’t accept the initial login. After that initial login, I can navigate to a page in a new tab and I am logged in.
One of my developers who had the problem only in Microsoft Edge browser saw this in the developer’s console:
Request header field “traceparent” is not allowed by Access-Control-Allow-Headers in preflight response.
This is a completely different error that I saw. After some googling, it looks like this could be Application Insights causing the issue.
Yep, this was it. Microsoft Azure Application Insights code snippet had its own set of excluded domains. We had added *.auth0.com to this exception list but since our production site is using a custom domain, we had to add an exception for this domain to get things working.
It was so confusing why this happened on all of my browsers and devices but others didn’t have a problem.
Anyway, hopefully anyone else with this specific issue may find value in our findings.