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?
CodePudding user response：
WORKAROUND:
- This link describes the basic problem - but I wasn't able to get any useful information from "curl":
C:\Windows\System32\curl.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:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S oqd12jhcu A56Ebc1zFSJ" crossorigin="anonymous">To this:
@*<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S oqd12jhcu A56Ebc1zFSJ" crossorigin="anonymous">*@ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />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?
- Why did it work "yesterday"... but started failing "today"?
- Why does it ALWAYS work on Windows/IIS7 (http) but SOMETIMES fails on MSVS/iisexpress (https/localhost)?
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?
CodePudding user response：
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.com really seems to sporadically omit the Access-Control-Allow-Origin header in CORS requests. I could not find a pattern in this.