[Bug]: Resource Hints: preload, fonts, and CORS

Summary

NOTE: I hope this is the correct place to report this, if not, please let me know and I would be happy to file it in the correct repository.

I like the added support for Resource Hints in the upcoming React 19 release but there seems to be either a bug or an oversight in the docs when it comes to preload as it relates to font loading.

Page

https://react.dev/reference/react-dom/preload

Details

The preload page uses font loading throughout the documentation page as an example use case, but nowhere does it include the use of the crossOrigin property with the anonymous value. Reading over the blog post announcing the release of React 19 beta, there is also an example using font loading which then also shows the following HTML output:

<link rel="preload" as="font" href="https://.../path/to/font.woff">

For reference: https://react.dev/blog/2024/04/25/react-19#support-for-preloading-resources

However, when preloading fonts one needs to always specify crossorigin in order for the resource hint to be respected. More details can be found on the MDN Web Docs website that covers preload.

I would have thought that perhaps React would internally automatically add this for font loading, but at the same time, it might be better for it to be a little less magical 😺 and be more explicit. In the latter case, one would need to update the examples in the docs and the release announcement post and make note of the "special" case of preloading fonts.

I believe this means that font loading should always be done as follows:

preload("https://example.com/font.woff2", {as: "font", crossOrigin: "anonymous"});

Resulting in the following HTML:

<link rel="preload" as="font" href="https://.../path/to/font.woff" crossorigin>

從 issue 中連結的 react-dom/preload 參考頁面和 React 19 部落格文章開始，找到字型預載入範例及其來源內容。更新範例和說明文字，以顯示字型所需的匿名跨來源設定，然後確認轉譯後的文件和 HTML 範例是否始終一致地反映這項指引。