Background
There is a sub-project(SV, alias) involved in a main project with iframe, we want to change iframe and use the Micro-front-end technology
SV uses the param token to refresh the URL source, which makes the browser believe that the source is new, and the customers always can get the newest source when they re-login. But if we use micro-front-end, we use the same URL as the entry of sub-project in micro-font-end project(CP, alias). Sometimes, things don't go so well.
Find the problem
SV has two different environments cn and sg, and SV can click its own link to redirect the main project(CP), but when you stay at one of SV pages, you will see blank, full blank. and the console tool of the browser will show an error "CORS problem xxx".
locate the problem (very important)
It's important to find what causes this, I tried a lot of ways to find it, at first, I thought it was just a cache problem, and I changed the build file's hash name (CSS files are different from js files), and publish again, but the dynatrace still report a 970 code again(970 is unknown problem, caused by blank - CORS problem, I guessed at that time)
I wanted to know the cache designs of the browser, I searched some technical blogs and the official document but found nothing.
I guessed the browser only cached one document and the response header is only one, and if your browser different sites, the browser will remember the initial one, and with chatGPT's help, I focused on the response header "Vary"
Solve the problem
"Vary: Origin"
"Vary: Origin" means the browser will not cache the same page on different sites(sources involved)
Summary
It takes me a few days at least, the most difficult process is to locate the problem, if you don't know the design of the browser, you will have fewer ways to solve this problem, fortunately, I did this. try and try, don't give up.
