Angular项目配置CSP后仍报refused to create worker错误如何解决？

• CSP指令命名格式错误：CSP所有指令都要求使用小写加短横线的kebab-case格式，你配置中的childSrc为驼峰命名，属于无效指令，浏览器会直接忽略该指令及后续未正确分隔的规则。
• 指令分隔符缺失：childSrc blob和worker-src blob:两行末尾没有添加规则分隔符分号，和前面的规则无法正确切割，进一步导致后续正确的worker-src规则也被浏览器忽略，所以浏览器会提示worker-src未显式设置，fallback到script-src做校验。
• script-src规则未覆盖blob场景：当前script-src仅放开了本地资源、unsafe-eval和指定的CDN worker地址，没有允许blob:协议的资源，因此blob形式生成的worker会被拦截。

1. 修正CSP规则的格式错误，调整后的完整规则如下：

default-src 'self';
script-src 'self' 'unsafe-eval' blob: https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/es5/build/pdf.worker.js;
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
img-src 'self' data: https://*.amazonaws.com;
media-src 'self' data: https://*.amazonaws.com;
connect-src 'self' http://localhost:* ws://localhost:*;
font-src 'self' https://fonts.gstatic.com https://fonts.googleapis.com data:;
child-src 'self' blob:;
worker-src 'self' blob:;

2. 确认CSP配置生效：

• 如果是在index.html的<meta>标签配置，确认http-equiv属性值为Content-Security-Policy，无拼写错误，且放置在head标签靠前位置，避免资源加载提前触发校验。
• 如果是通过代理配置、后端响应头配置，确认响应头的键名为Content-Security-Policy，规则未被其他中间件覆盖。

3. 可选适配pdfjs配置：如果使用pdfjs相关封装库，可以直接指定worker加载地址为已放开的CDN地址，避免生成blob worker，示例配置：

import * as pdfjsLib from 'pdfjs-dist';
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/es5/build/pdf.worker.js';

内容的提问来源于stack exchange，提问作者Naresh Singh