Vite-React请求Express后端遇CSP/CORS及连接拒绝问题

核心问题排查与修复 #

1. 请求URL格式错误 #

前端fetch请求中的URL存在语法错误：

"http://127.0.0.1/3001/auth/register"

端口号需用冒号而非斜杠与IP分隔，正确URL应为：

"http://127.0.0.1:3001/auth/register"

斜杠会导致请求发送到默认80端口，而非后端运行的3001端口，这是ERR_CONNECTION_REFUSED的直接原因。

2. 请求Body未正确序列化 #

发送JSON格式数据时，必须将对象转为JSON字符串，否则后端无法解析请求体。修改请求代码：

body: JSON.stringify({
    user: {
        username: values.username,
        password: values.password,
        wallets: [{
            name: values.wallet,
            balance: values.balance
        }]
    }
})

CORS与CSP配置优化 #

1. 使用专门CORS中间件 #

Helmet的crossOriginResourcePolicy配置无法处理完整CORS需求，建议安装cors包：

npm install cors

在后端入口文件中配置：

import cors from 'cors';
app.use(cors()); // 生产环境可指定允许的origin列表

2. 调整CSP指令 #

确保connectSrc和scriptSrc覆盖后端地址：

app.use(
  helmet.contentSecurityPolicy({
    directives: {
      defaultSrc: ["'self'"],
      scriptSrc: ["'unsafe-inline'", "localhost:*", "127.0.0.1:*"],
      objectSrc: ["'none'"],
      connectSrc: ["'self'", "localhost:*", "127.0.0.1:*"],
      upgradeInsecureRequests: [],
    },
  })
);

Vite代理配置（推荐） #

配置Vite代理可彻底避免跨域问题，在vite.config.js中添加：

export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:3001',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
}

前端请求可简化为：

const savedUserResponse = await fetch(
  "/api/auth/register",
  { /* 请求配置 */ }
)

后端路由验证 #

确保auth路由已正确挂载到主应用：

import authRoutes from './routes/auth.js';
app.use('/auth', authRoutes);

内容的提问来源于stack exchange，提问作者Furkan Sengün