[Error] because it violates the following Content Security Policy directive

html开发过程中,遇到以下错误,意思是html的meta设置的权限问题

Refused to connect to 'blob:http://localhost:8080/6d57f07f-3c2f-49ca-be30-fd0b7f4cff6e' 
because it violates the following Content Security Policy directive: 
"default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content: ". 
Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

具体是使用vue-html2pdf时,出现此bug。
截图如下

上一次遇到类似问题是使用video标签时。
这些都是类似问题

需要打开html页面源码(例如index.html),修改其head部分的meta

  <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content: https://ssl.gstatic; 
    media-src * blob: 'self' http://* 'unsafe-inline' 'unsafe-eval'; 
    style-src * 'self' 'unsafe-inline'; 
    img-src * 'self' data: content:; 
    connect-src * blob:;">

例子中分成了多行,可以根据自己需要修改,例如img-src 允许 * 等多个类型的资源。
connect-src 允许* blob:等类型资源。注意*并不包含blob:类型,如果没有申明blob:可能出错

参考资料

cordova错误之: Refused to connect to XXX – because it violates the following Content Security Policy…
cordova Refused to connect to xxxxx – 白名单拒绝发送网络请求
meta标签官网:https://developer.mozilla/zh-CN/docs/Web/HTML/Element/meta
Content Security Policy官网:https://developer.mozilla/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy__by_cnvoid

更多推荐

[Error] because it violates the following Content Security Policy directive