新表单内容安全策略（CSP）简易配置及报错关联问题咨询

• 两类报错分属独立问题范畴：webpack相关的资源拦截报错为前端加载被拦截，与现有CORS配置无直接关联。
• 在public/index.html插入CSP配置导致页面无法渲染，核心原因是规则过严拦截了webpack注入的脚本资源。

禁止在public/index.html中硬编码CSP meta标签，该方式容易因规则写错触发资源拦截，最简配置路径分为两类：

1. 开发环境配置
   直接在webpack配置文件的devServer项中追加响应头配置，无需修改前端业务代码，规则专门适配webpack热更新、本地资源注入的场景，不会触发白屏：

   // webpack.config.js 配置片段
   module.exports = {
     devServer: {
       headers: {
         "Content-Security-Policy": "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; connect-src 'self'"
       }
     }
   }
   

2. 生产环境配置
   直接在后端响应头中间件中追加CSP规则，优先级高于前端meta标签，可全局覆盖所有页面。

现有CORS配置存在两处问题，也是其他表单触发请求头相关报错的原因：

• 字段名大小写不规范：Access-Control-Allow-headers正确拼写为Access-Control-Allow-Headers（首字母大写H），浏览器对该字段大小写敏感，拼写错误会直接导致预检请求失败。
• 允许的请求头字段不全：缺失表单常用的自定义请求头，需补全后即可覆盖注册类、复杂表单的接口请求场景，优化后的完整中间件代码如下：

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header(
        'Access-Control-Allow-Headers',
        'Origin, X-Requested-With, Content-Type, Accept, Authorization, X-CSRF-Token'
    );
    // 生产环境直接返回CSP响应头，无需前端改动
    res.header('Content-Security-Policy', "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; connect-src 'self'")
    next();
});

• CSP规则需按照实际加载的资源逐步放宽，初始规则过严会直接拦截所有脚本加载，触发页面白屏。
• 若使用vue-cli、create-react-app等脚手架，无需手动修改index.html，直接在脚手架对应的配置文件（vue.config.js、craco.config.js）的devServer.headers项中追加CSP规则即可，逻辑与原生webpack配置一致。
• 报错排查时需区分两类规则的边界：CSP报错为浏览器拦截页面自有资源加载，控制台会明确标注Content Security Policy相关提示；CORS报错为跨域接口请求被拦截，控制台会标注Cross-Origin Resource Sharing相关提示，避免混同排查。

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