Stripe Elements加载自定义字体遇CORS错误，如何解决？

报错原因 #

你遇到的是浏览器同源策略下的CORS跨域访问限制：Stripe Elements组件运行在https://js.stripe.com域名的iframe环境中，当它请求你业务域名下的字体文件时，浏览器会校验字体资源的响应头是否允许跨域调用。目前你的字体文件响应头未携带Access-Control-Allow-Origin字段，因此请求被拦截。

解决方法 #

• 方案1：配置静态资源服务器跨域规则 #

在你存放字体文件的静态资源服务中，为字体类资源添加跨域响应头，允许Stripe域名访问：

Access-Control-Allow-Origin: https://js.stripe.com
Access-Control-Allow-Methods: GET, OPTIONS

不同服务的配置方式可参考对应服务的静态资源跨域配置文档，比如Nginx可在server块中新增匹配字体后缀的规则，添加add_header配置；Apache可在.htaccess文件中新增Header规则。

• 方案2：字体转base64内嵌使用 #

如果无法修改服务器配置，可以将AvenirNextLTPro-Bold.otf文件转换为base64编码，直接写入Stripe Elements的配置中，无需发起跨域请求：

const elements = stripe.elements({
  fonts: [
    {
      family: 'Avenir-Regular-Bold',
      src: 'url(data:font/otf;base64,替换为你的字体base64编码内容)'
    }
  ]
});

注意该方案会让配置体积增加约33%，仅适合小体积字体使用。

• 方案3：使用支持跨域的公开字体CDN #

如果你的字体有公开的CDN资源，且对应CDN已配置允许https://js.stripe.com跨域访问，可直接将src替换为CDN的字体地址即可。

内容的提问来源于stack exchange，提问作者Anthony Frizalone