A preload for '[AzureCDN]/hello-world-web-part_25beead865729ba82e5f.js' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.

[MarksPoint]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

macOS

What browser(s) / client(s) have you tested

• [ ] 💥 Internet Explorer
• [ ] 💥 Microsoft Edge
• [X] 💥 Google Chrome
• [ ] 💥 FireFox
• [ ] 💥 Safari
• [ ] mobile (iOS/iPadOS)
• [ ] mobile (Android)
• [ ] not applicable
• [ ] other (enter in the "Additional environment details" area below)

Additional environment details

• browser version: Chrome Version 120.0.6099.109 (Official Build) (arm64)
• SPFx version: 1.18.2 (but issue exists at least since 1.14)

Describe the bug / error

Deploying an SPFx solution to Azure CDN results in the following browser warning:

A preload for '[AzureCDN]/hello-world-web-part_25beead865729ba82e5f.js' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.

We've got our SPFx solutions deployed to Azure CDN, and we've been seeing this behaviour for a long time now. We're not sure about the actual performance impact because the script is eventually cached in browser (so re-loading should be fast), but nevertheless we feel like there's some performance improvement we're missing out on.

If I disable cache in my browser (devtools), and open something like Fiddler to inspect network traffic, I see the following two requests that both load the same script file, but seem to differentiate primarily in the cors/no-cors header:

I think the first request is for the 'preload', but the result of is discarded (according to the warning).

Looking at the HTML of the page, I see the <link tag that's responsible for the preload:

<link rel="preload" href="https://[AzureCDN]/hello-world-web-part_25beead865729ba82e5f.js" as="script" crossorigin>

Steps to reproduce

I followed these steps to create a new dummy web part that was then uploaded to Azure Storage:

https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/deploy-web-part-to-cdn

Additionally, I made the storage account anonymously accessible and I added the following CORS settings on the Blob service:

This to prevent CORS errors that would otherwise appear, loading the script file(s).

Expected behavior

Preloading the script should work as expected, providing performance improvements to loading the (web part) script. The script should not be loaded twice.