错误：“从来源‘http://localhost:3000’获取的访问已被 CORS 策略阻止”

我通过后端部分上传到 render，我想从那里获取数据。但不幸的是 cors 正在阻止它。我寻找解决方案，我发现使用 Chatgpt 和 stackoverflow，如果我使用 :

//Access to fetch at from origin
app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  next();
});

将这个放入我的 server.js 文件中，然后它应该可以工作。但这对我不起作用。我仍然收到此错误。所以我正在寻找可以帮助我修复它的相关解决方案。 服务器.js:

const express = require("express");
const colors = require("colors");
const morgan = require("morgan");
const dotenv = require("dotenv");
const cors = require("cors");
const connectDB = require("./config/db");
const router = require("./routes/router");
const Products = require("./models/productSchema");
const DefaultData = require("./defaultdata.");
const cookieParser = require("cookie-parser");
//dotenv config
dotenv.config();

//mongodb connection
connectDB();

//rest object
const app = express();

//middlewares
app.use(express.json());
app.use(cookieParser());
app.use(morgan("dev"));
app.use(cors());

//Access to fetch at from origin
app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  next();
});

app.use(router);

// Port
const port = process.env.PORT || 8080;

//listen PORT
app.listen(port, () => {
  console.log(
    `Server is running in ${process.env.NODE_MODE} Mode on port ${process.env.PORT}`
      .bgCyan.white
  );
});

DefaultData();

这是我尝试从后端获取数据的反应组件之一：

import React, { useContext, useEffect, useState } from "react";
import "../../styles/Navbar.css";
import SearchIcon from "@mui/icons-material/Search";
import Badge from "@mui/material/Badge";
import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";
import Avatar from "@mui/material/Avatar";
import { NavLink, useNavigate } from "react-router-dom";
import { Logincontext } from "../context/ContextProvider";
import IconButton from "@mui/material/IconButton";
import MenuIcon from "@mui/icons-material/Menu";
import Drawer from "@mui/material/Drawer";
import Leftheader from "./Leftheader";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import LogoutIcon from "@mui/icons-material/Logout";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import { useSelector } from "react-redux";

const Navbar = () => {
  const { account, setAccount } = useContext(Logincontext);
  // console.log(account);

  const navigate = useNavigate();

  //Menu Collect from material-ui
  const [anchorEl, setAnchorEl] = useState(null);
  const open = Boolean(anchorEl);
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };

  //serach bar
  const [text, setText] = useState("");
  console.log(text);
  const [listopne, setListopen] = useState(true);

  const { products } = useSelector((state) => state.getproductsdata);

  // get valid user
  const getValiduserDetails = async () => {
    const res = await fetch(
      "",
      {
        method: "GET",
        headers: {
          Accept: "application/json",
          "content-Type": "application/json",
        },
        credentials: "include",
      }
    );

    const data = await res.json();
    console.log(data);

    if (res.status === 400) {
      // console.log("User is not logged in");
    } else {
      // console.log("Valid user");
      setAccount(data);
    }
  };

  const [drawerOpne, setDrawerOpen] = useState(false);

  // handle drawer
  const handleDraweOpen = () => {
    setDrawerOpen(true);
  };

  const handleDraweClose = () => {
    setDrawerOpen(false);
  };

  //logout user
  const logoutuser = async () => {
    const res2 = await fetch("", {
      method: "GET",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      credentials: "include",
    });

    const data2 = await res2.json();
    // console.log(data2);

    if (!res2.status === 201) {
      const error = new Error(res2.error);
      throw error;
    } else {
      setAccount(false);
      // setOpen(false)
      toast.success("Logout Successfull", {
        position: "top-center",
      });
      navigate("/");
    }
  };

  const getText = (iteams) => {
    setText(iteams);
    setListopen(false);
  };

  useEffect(() => {
    getValiduserDetails();
  }, []);
  return (
    <header>
      <nav>
        <div className="left">
          <IconButton className="appbar" onClick={handleDraweOpen}>
            <MenuIcon style={{ color: "#fff" }} />
          </IconButton>
          <Drawer open={drawerOpne} onClose={handleDraweClose}>
            <Leftheader logClose={handleDraweClose} />
          </Drawer>
          <div className="navlogo">
            <NavLink to="/">
              <img src="./amazon_PNG25.png" alt="amazon_logo" />{" "}
            </NavLink>
          </div>
          <div className="nav_searchbaar">
            <input
              type="text"
              name=""
              onChange={(e) => getText(e.target.value)}
              placeholder="Search Your Procucts"
              id=""
            />
            <div className="search_icon">
              <SearchIcon id="search" />
            </div>

            {/* Search Filter */}
            {text && (
              <List className="extrasearch" hidden={listopne}>
                {products
                  .filter((product) =>
                    product.title.longTitle
                      .toLowerCase()
                      .includes(text.toLocaleLowerCase())
                  )
                  .map((product) => (
                    <ListItem>
                      <NavLink
                        to={`/getproductsone/${product.id}`}
                        onClick={() => setListopen(true)}
                      >
                        {product.title.longTitle}
                      </NavLink>
                    </ListItem>
                  ))}
              </List>
            )}
          </div>
        </div>
        <div className="right">
          <div className="nav_btn">
            <NavLink to="/login">Signin</NavLink>
          </div>
          <div className="cart_btn">
            {account ? (
              <NavLink to="/buynow">
                <Badge badgeContent={account.carts.length} color="primary">
                  {/* <Badge badgeContent={4} color="primary"> */}
                  <ShoppingCartIcon id="icon" />
                </Badge>
              </NavLink>
            ) : (
              <NavLink to="/login">
                <Badge badgeContent={0} color="primary">
                  <ShoppingCartIcon id="icon" />
                </Badge>
              </NavLink>
            )}
            <p>Cart</p>
          </div>

          {account ? (
            <Avatar
              className="avtar2"
              id="basic-button"
              aria-controls={open ? "basic-menu" : undefined}
              aria-haspopup="true"
              aria-expanded={open ? "true" : undefined}
              onClick={handleClick}
            >
              {account.fname[0].toUpperCase()}
            </Avatar>
          ) : (
            <Avatar
              className="avtar"
              id="basic-button"
              aria-controls={open ? "basic-menu" : undefined}
              aria-haspopup="true"
              aria-expanded={open ? "true" : undefined}
              onClick={handleClick}
            ></Avatar>
          )}

          <Menu
            id="basic-menu"
            anchorEl={anchorEl}
            open={open}
            onClose={handleClose}
            MenuListProps={{
              "aria-labelledby": "basic-button",
            }}
          >
            <MenuItem onClick={handleClose} style={{ margin: 10 }}>
              My account
            </MenuItem>
            {account ? (
              <MenuItem onClick={handleClose} style={{ margin: 10 }}>
                <LogoutIcon
                  style={{ fontSize: 25, marginRight: 5 }}
                  onClick={logoutuser}
                />
                Logout
              </MenuItem>
            ) : (
              ""
            )}
          </Menu>
        </div>
        <ToastContainer />
      </nav>
    </header>
  );
};

export default Navbar;

在每个组件中我都有同样的错误。错误：

所以我正在寻找可以帮助我修复它的相关解决方案。我在很多地方找到了更多的解决方案。但他们都不适合我。