【发布时间】：2022-01-21 17:00:20
【问题描述】：
我对这个错误有一个很大的问题，我似乎无法阻止它显示。
*免责声明：我还是一名大三学生，我还在详细了解 NextJS，所以如果在问这个问题的过程中犯了一些错误，请原谅我。
我正在使用最新版本的NextJS（在提问时）并将其部署到vercel
我尝试过的东西。
1。我向_app.tsx 中的<Head /> 元素添加了一个元标记，如下所示
<meta
http-equiv="Content-Security-Policy"
content="font-src * 'unsafe-inline';"
/>
（我多次拼错 content 属性，它给了我一个错误，所以我知道它正在工作，我正在使用 `font-src * 'unsafe-inline'，因为据说它允许所有来源）
但错误仍然存在
来源：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src
2。我将标题添加到next.config.js
...
const securityHeaders = [
{
key: 'Content-Security-Policy',
value: `font-src * 'unsafe-inline';`,
},
]
module.exports = withImages({
async headers() {
return [
{
// Apply these headers to all routes in your application.
source: '/:path*',
headers: securityHeaders,
},
]
},
...
错误一直显示。如果我将此标头设置为font-src 'self' 或font-src https://js.stripe.com。我在这个错误之上得到了一个不同的错误，它指出 本地字体拒绝加载，因为它违反了 font-src https://js.stripe.com
来源：https://nextjs.org/docs/advanced-features/security-headers
3。我加了vercel.json
我的一个同事建议这可能是一个vercel错误，所以我将它添加到文件中
{
"routes": [
{
"src": "/(.*)",
"headers": {
"content-security-policy-report-only": "font-src * 'unsafe-inline';"
}
}
]
}
来源：https://app.rapidsec.com/docs/deploying-csp
错误仍然存在
实际问题。
我应该继续尝试使用这些安全标头，还是死路一条？它是一个vercel错误，还是一个nextjs错误，因为它只发生在服务器上？或者我应该尝试覆盖分配这些字体的类来解决这个错误。
附：当我打开错误中的链接时，它给了我Error 404，这是官方的条带依赖stripe: "^8.195.0
【问题讨论】：
-
您可以在此处找到有关内容安全策略和 Stripe.js 的具体详细信息：stripe.com/docs/security/guide#content-security-policy
标签： next.js stripe-payments content-security-policy vercel stripes