Express JS中CSP配置问题：Blob协议Worker创建被拒绝

你的配置存在两个关键问题：

1. Express静态文件中间件拼写错误 #

代码里的express. Static('mobile')写法错误，正确格式是express.static('mobile')——Static首字母需小写，且express与static之间不能有空格。这个错误会导致静态文件中间件无法加载，不仅影响静态资源访问，还会让前面的CSP中间件无法正常执行，浏览器接收不到你配置的完整CSP规则。

2. CSP指令可能存在语法解析问题 #

错误信息显示浏览器仅识别了default-src指令，完全忽略了worker-src等配置，大概率是因为CSP字符串里使用了全角空格分隔指令。浏览器解析CSP要求必须用半角空格分隔指令，全角空格会导致后续指令被当成default-src的一部分，无法被正确识别。

修正后的代码 #

const express = require('express');
const app = express();
const PORT = process.env.PORT || 4000;

app.use(function(req, res, next) {
    // 确保所有分隔空格为半角，指令格式合规
    res.setHeader("Content-Security-Policy", "worker-src blob: *; child-src blob: gap:; img-src 'self' blob: data:; default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: blob:");
    return next();
});

// 修正静态文件中间件拼写
app.use(express.static('mobile'));

app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

额外注意事项 #

• 修改后重启服务器，并强制刷新浏览器页面（Ctrl+F5），避免浏览器缓存旧的CSP规则。
• 由于已显式设置worker-src blob: *，default-src里的blob:可以省略，保留也不会产生问题。

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