Stripe Elements 不会加载我的自定义字体答案

【问题标题】：Stripe Elements won't load my custom fontStripe Elements 不会加载我的自定义字体
【发布时间】：2022-01-09 13:46:14
【问题描述】：

我正在使用此代码为我的 Stripe 卡号元素加载自定义字体：

const elements = stripe.elements({
                    fonts: [
                        {
                            family: 'Avenir-Regular-Bold',
                
                            src: 'url(\'styles/AvenirNextLTPro-Bold.otf\')'
                        }
                    ]
                });

我收到关于加载所述字体的错误：

CORS 政策已阻止从源“https://js.stripe.com”访问“https://example.com/app/styles/AvenirNextLTPro-Bold.otf”字体：无“访问权限-请求的资源上存在 Control-Allow-Origin' 标头。

我不知道这是什么意思，也不知道 Stripe 为什么这么说。有什么办法可以让我的自定义字体加载？

【问题讨论】：

标签： javascript stripe-payments

【解决方案1】：

我是这样解决的：

<?php
header("Access-Control-Allow-Origin: *");

echo file_get_contents('https://example.com/AvenirNextLTPro-Bold.otf');

然后将这个页面的 url 提供给 Stripe。

【讨论】：