踩坑笔记（tarui+nextjs）

如何发生：

使用懒加载组件

const Election = dynamic(() => import("./mainCpn/election"), {
  ssr: false,
});

这样引入，然后使用。dev模式下，央视是存在的。但是build打包后

会触发以下错误：

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-14251269561941805212'". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution.

解决方法：

首先这是因为安全策略发生的错误。需要配置CSP

具体配置：

我在tarui的配置文件中配置
 

    "security": {
      "csp": "default-src 'self'; style-src 'self' 'nonce-你的nonce值'; connect-src 'self' http://localhost:3000 https://localhost:3000;"
    },

然后就可以使用了，其中的noce值应该是随机的，但写死也可以，但会存在安全问题。如果安全要求高的话。

可以在html中配置，服务端进行生成随机的，然后填到html中，这样会更安全。