[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>

Bắt đầu với trang tham chiếu react-dom/preload và bài đăng blog về React 19 được liên kết trong issue, tìm các ví dụ về việc preload font và nội dung nguồn của chúng. Cập nhật các ví dụ và văn bản giải thích để thể hiện thiết lập cross-origin ẩn danh bắt buộc đối với font, sau đó xác minh rằng tài liệu được render và các ví dụ HTML phản ánh nhất quán hướng dẫn này.