I have a bunch of different versions of the same ASP.NET Core app. My workstation has MSVS 2019. My DEV and PROD servers are Windows Server 2012/IIS7.
The app has been around for years. It’s NOT doing anything to explicitly enable CORS. It’s NOT calling Services.AddCors(), app.UseCors(), policy.WithOrigins(), [EnableCors] or anything like that.
Most of the time, it "just works".
But SOMETIMES (like now), I get a CORS error trying to access FontAwesome when I run in the MSVS 2019 debugger:
Chrome developer tools console:
Access to CSS stylesheet at 'https://use.fontawesome.com/releases/v5.7.0/css/all.css' from origin 'https://localhost:44342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
When the problem occurs, it’s ONLY on my workstation in the MSVS 2019 debugger (iiexpress). It NEVER occurs on any of the PROD or DEV servers.
The baffling part is that – as far as I can tell – "nothing changed". My projects all worked yesterday. But they’re all getting the CORS error on FA CSS today. And the remote IIS servers … running the same app … work fine … in the same browser!
Here’s the header from one of the "bad" pages:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js" integrity="sha256-4iQZ6BVL4qNKlQ27TExEhBN1HFPvAvAMbFavKKosSWQ=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/[email protected]/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.25/sorting/datetime-moment.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
</head>
I DON’T want to modify the app (if I can avoid it), simply because I don’t want to risk breaking code that’s been around "forever".
I’d LOVE to figure out what could possibly be changing in my workstation’s environment, so I can "fix" it.
Or maybe I can just use a different link to FontAwesome?
Q: Any suggestions?
2
Answers
WORKAROUND:
https://github.com/FortAwesome/Font-Awesome/issues/17402
C:WindowsSystem32curl.exe: curl 7.79.1 (Windows) libcurl/7.79.1 Schannel
Result: "Blank" - no "curl" output whatsoever...
I was able to work around the problem by changing all my ASP.Net layouts:
To this:
Result: It worked:
No CORS errors; FontAwesome icons are successfully displaying on MSVS. Again.
Q: ???WHY???
Q: Any suggestions for how I can troubleshoot exactly what was wrong with the first FA link?
SOMETHING from the client request and/or client environment definitely affects whether or not that particular FA server decides to block the request. I'd definitely like to better understand "what".
Q: Any thoughts/suggestions/further troubleshooting tips?
The
crossorigin="anonymous"in the<link>element causes the browser to load the stylesheet with a CORS request. Without that attribute, stylesheets can be loaded from any origin without CORS.Perhaps removing the attribute is a workaround for you, because
fontawesome.comreally seems to sporadically omit theAccess-Control-Allow-Originheader in CORS requests (and also theContent-Typeheader). I could not find a pattern in this.