React调用Node.js后端Signup API触发CSP错误求助

核心原因 #

错误提示明确是Content Security Policy（CSP） 阻止了请求，而非CORS配置问题（Postman能正常调用说明后端CORS配置有效）。CSP是前端页面的安全策略，限制了页面可以加载的资源和发起请求的目标地址。

解决方案 #

1. 修改前端CSP配置 #

检查React项目的public/index.html文件，找到包含Content-Security-Policy的meta标签，在connect-src规则中添加http://localhost:3001，允许页面向该地址发起请求。

示例修改后的meta标签：

<meta http-equiv="Content-Security-Policy" content="
  default-src 'self';
  script-src 'self' 'unsafe-inline';
  style-src 'self' 'unsafe-inline';
  connect-src 'self' http://localhost:3001; <!-- 添加这行 -->
  img-src 'self' data:;
">

如果没有这个meta标签，可能是开发服务器默认添加了CSP规则，可在Create React App的配置中自定义CSP，或者开发阶段临时禁用CSP（生产环境必须配置正确的CSP）。

2. 修复fetch函数的异步逻辑 #

你的代码存在异步处理错误：fetch返回Promise，直接return res.data会得到undefined（res.data是axios的用法，fetch不支持），且async函数混用.then会导致逻辑混乱。修改为标准async/await写法：

export const postAPIWithoutHeader = async () => {
    console.log("postAPIWithoutHeader");
    try {
        const myHeaders = new Headers();
        myHeaders.append("Content-Type", "application/json");

        const raw = JSON.stringify({
            "name": "some",
            "email": "testemail@gmail.com",
            "password": "Password234@",
            "role": "1",
            "require_servie": true
        });

        const requestOptions = {
            method: 'POST',
            headers: myHeaders,
            body: raw,
            redirect: 'follow'
        };

        const response = await fetch("http://localhost:3001/user/signup", requestOptions);
        // 若后端返回JSON，改用response.json()
        const result = await response.text(); 
        console.log(result);
        return result;
    } catch (err) {
        console.log("the error we get is ", err);
        throw err; // 抛出错误让调用方处理，而非返回错误对象
    }
}

3. 确认后端CORS配置 #

确保后端corsOptions中的origin数组包含React应用运行的端口（比如你的React在http://localhost:3000，已配置在内），如果React运行在其他端口，需要添加到数组中。

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