在使用 html-to-image 库生成图片时，发现生成的图片中字体样式没有应用上，在本地运行时生成的图片是没有问题的。
查看控制台，发现有报错：
Failed to read the "cssRules" property from "CSSStyleSheet"
原因是项目的 Nextjs 部署时，Node 运行的代码放在了服务器上，但是JS、CSS 以及字体等静态资源则放在了 CDN 上，因此CSS 与访问的网站是跨域的，虽然 CDN 上设置了 Access-Control-Allow-Origin: *，但是因为浏览器对于 cssRule的限制更加严格
- 跨源限制： 浏览器的同源策略阻止了对跨源样式表的
cssRules的访问。这是为了防止潜在的跨站点脚本攻击。 - CORS（跨源资源共享）： 虽然 CORS 机制允许跨源资源共享，但是对于样式表的
cssRules访问，浏览器通常要求更严格的控制。
解决办法：
// next.config.js 文件中添加
crossOrigin: 'anonymous',crossOrigin
crossorigin 属性在 HTML <link> 标签中的使用，是跨源资源共享（CORS）机制的一部分。这个属性允许你控制在加载跨源资源时应用的 CORS 设置。对于 <link> 标签，这通常涉及到加载外部的样式表（CSS）文件。
当你在 <link> 标签中设置 crossorigin="anonymous" 时，你告诉浏览器在获取跨源资源时不应发送用户凭证（如 cookies、HTTP 认证细节和客户端 SSL 证书）。这是 CORS 请求的一种形式，目的是为了在 Web 应用中安全地使用跨源内容。
具体含义
- 不发送用户凭证： 使用
crossorigin="anonymous"时，浏览器在请求资源时不会携带用户凭证（cookies、HTTP 认证及客户端证书）。即使对于通常会携带用户凭证的请求（例如同源请求或在发送凭证的站点之间），这个属性也会阻止凭证的发送。 - CORS 请求： 这将使资源请求成为一个 CORS 请求。CORS（跨源资源共享）是一种机制，允许或拒绝来自不同源的 Web 页面的资源请求。对于跨源资源（例如来自不同域名的 CSS 文件），服务器需要在响应头中包含适当的
Access-Control-Allow-Origin字段，来表示这些资源可以被不同源的 Web 页面所使用。 - 安全性： 这种做法增加了安全性，因为它防止了潜在的跨源请求伪造（CSRF）攻击。通过限制凭证的发送，即使攻击者可以引诱用户的浏览器发起请求，他们也无法访问响应或利用用户的凭证。
- 错误处理： 当使用
crossorigin="anonymous"时，如果资源没有返回一个有效的 CORS 头部（Access-Control-Allow-Origin），浏览器将不会加载资源，并且可能会在控制台中显示一个跨源错误。
使用场景
- 加载来自 CDN（内容分发网络）或其他外部源的资源时，特别是当这些资源不是从服务当前网页的同一个域名提供时。
- 增加对跨源资源请求的安全控制，特别是在使用第三方资源，如字体、CSS 或 JavaScript 库时。
crossorigin="anonymous" 属性在 <link> 标签中的使用是一种安全实践，它有助于确保在跨域情况下安全地使用资源，同时避免发送敏感的用户凭证信息。