Spring Boot Webflux配置的CSP在React站点未生效问题求助

数据老陈

2026-10-5

CSP配置未生效问题原因及解决方案

核心原因

你当前观测到的携带CSP配置的响应是后端Java接口的响应，Content-Type为application/json，浏览器仅会对站点加载的主HTML文档、静态资源响应头中的CSP规则生效，接口响应携带的CSP不会作用于整个站点。
你项目为前后端分离架构，React前端的静态资源（含入口HTML）由独立服务托管，从你贴的响应头中X-Powered-By: Express可以判断，前端静态资源大概率是Express服务托管，你仅在Spring Boot后端配置了CSP，前端静态资源的响应头并未携带CSP规则，因此不会生效。

前端收到响应后不需要额外操作，只要页面主文档的响应头携带正确的CSP配置，浏览器会自动应用规则。

解决方案

在前端静态资源托管服务侧统一添加CSP响应头：

若为Express托管前端，添加全局响应头配置：

app.use((req, res, next) => {
  res.setHeader('Content-Security-Policy', "default-src 'self'; script-src 'self'; img-src 'self';media-src 'self'; object-src 'self'; connect-src 'self'; worker-src 'none'; form-action 'self';frame-src 'none'; child-src 'none'; style-src 'self'; frame-ancestors 'none';");
  res.setHeader('X-Frame-Options', 'DENY');
  next();
});

若为Nginx托管前端，在对应server/location配置块下添加：

add_header Content-Security-Policy "default-src 'self'; script-src 'self'; img-src 'self';media-src 'self'; object-src 'self'; connect-src 'self'; worker-src 'none'; form-action 'self';frame-src 'none'; child-src 'none'; style-src 'self'; frame-ancestors 'none';";
add_header X-Frame-Options DENY;