React App 对 Express 后端的 Vite 获取请求被 CSP 和 CORS 拒绝

Question

我的前端是用 Vite-Express 和 React 设置的。注册用户时，react 会向“http://127.0.0.1/3001/auth/register”发送 post 请求。

控制台吐出：

   POST http://127.0.0.1/3001/auth/register net::ERR_CONNECTION_REFUSED

我已经这样设置我的cors：

/** CORS CONFIG VIA HELMET */
app.use(
  helmet({
    crossOriginResourcePolicy: false,
  })
);

我的 csp 设置：（我也遇到了问题）

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

我想要提出的要求：

const register = async (values, onSubmitProps) => {
        const savedUserResponse = await fetch(
            "http://127.0.0.1/3001/auth/register",
            {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: {
                    user: {
                        username: values.username,
                        password: values.password,
                        wallets: [{
                            name: values.wallet,
                            balance: values.balance
                        }]

                    }
                }
            }
        )
        const savedUser = await savedUserResponse.json();
        onSubmitProps.resetForm()

        if (savedUser) {
            setPageType("login")
        }
    };

后端路由：

******controllers/auth.js******
export const register = async (req, res) => {
    try {
        const {
            username,
            password,
            wallets,
            balance
        } = req.body.user;
        const salt = await bcrypt.genSalt();
        const passwordHash = await bcrypt.hash(password, salt);

        req.body.user.password = passwordHash
        req.body.user.wallets = [{ name: wallets, balance: balance }]
        console.log(req.body.user)

        const newUser = new User(
            req.body.user
        );
        const savedUser = await newUser.save();
        console.log(savedUser, "savedUser")
        res.status(201).json(savedUser);
    } catch (err) {
        res.status(500).json({ error: err.message });
    }
}
******routes/auth.js****** 
import express from "express";
import { login, register } from "../controllers/auth.js"

const router = express.Router();

router.post("/register", register)
export default router;

我尝试关闭 CORS，但没有帮助。

我从 Postman 发出的任何请求都有效，表明问题出在前端和/或安全协议上。

您可以在这里找到整个代码库： https://github.com/bigpaloma/expenseTracker

我用React和Express启动我的Vite应用程序的包： https://github.com/szymmis/vite-express?tab=readme-ov-file#-installation--usage

Answer 1

如果您在后端正确处理了cors，那么问题可能出在您的浏览器上。使用firefox。对于 chrome，你必须下载一些扩展程序或一些 idk 的东西。