已被 CORS 策略阻止”"/>
错误:“从来源‘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;
在每个组件中我都有同样的错误。错误:
所以我正在寻找可以帮助我修复它的相关解决方案。我在很多地方找到了更多的解决方案。但他们都不适合我。
回答如下:更多推荐
错误:“从来源‘http://localhost:3000’获取的访问已被 CORS 策略阻止”
发布评论