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

Comece pela página de referência de react-dom/preload e pela publicação do blog sobre React 19 vinculadas na issue, localizando os exemplos de pré-carregamento de fontes e seu conteúdo de origem. Atualize os exemplos e o texto explicativo para mostrar a configuração anônima de cross-origin necessária para fontes e, em seguida, verifique se a documentação renderizada e os exemplos HTML refletem consistentemente essa orientação.