从源'http://localhost:3000' 'http://localhost:5000/api/products'访问 XMLHttpRequest 已被 CORS 策略阻止：无"访

Question

我正试图通过使用axios的poster获取在db上创建的数据，但我一直没有收到访问控制cors错误。我添加了"；Moesif Origin&CORS转换器"；插件到我的chrome仍然没有解决方案。我需要服务器上的cors，我得到了同样的问题。我不知道我做错了什么。我已经阅读并尝试了这里给出的几种解决方案。

我的客户端代码(React.JS(

import styled from "styled-components";
import { popularProducts } from "../data";
import Product from "./Product";
import axios from "axios";
import { useState, useEffect } from "react";
const Container = styled.div`
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
`;
const Products = ({ cat, filter, sort }) => {
const [products, setProducts] = useState([]);
const [filteredProducts, setFilteredProducts] = useState([]);
useEffect(() => {
const getProducts = async () => {
try {
const res = axios.get("http://localhost:5000/api/products");
console.log(res);
} catch (err) {}
};
getProducts();
}, [cat]);

我的后端API(Express(

const express = require("express");
const app = express();
const mongoose = require("mongoose");
const dotenv = require("dotenv");
const userRoute = require("./routes/user");
const authRoute = require("./routes/auth");
const productRoute = require("./routes/product");
const cartRoute = require("./routes/cart");
const orderRoute = require("./routes/order");
const  cors = require("cors");

dotenv.config();
mongoose
.connect(process.env.MONGO_URL)
.then(() => console.log("DB connection successful"))
.catch((error) => {
console.log(error);
});
//middleware
app.use(express.json());
app.use("/api/auth", authRoute);
app.use("/api/users", userRoute);
app.use("/api/products", productRoute);
app.use("/api/carts", cartRoute);
app.use("/api/orders", orderRoute);
app.use(cors());
app.listen(process.env.PORT || 5000, () => {
console.log("Backend server is running");
});

Answer 1

问题是，您在中间件堆栈的底部包含cors中间件，因此只有在没有路由匹配的情况下才能访问它，即您的404错误将具有CORS头，但其他任何错误都不会：

app.use("/api/auth", authRoute);
app.use("/api/users", userRoute);
app.use("/api/products", productRoute); // This route handles the request
// and ENDS the request processing
app.use("/api/carts", cartRoute);
app.use("/api/orders", orderRoute);
app.use(cors());                        // This is never reached!

您需要CORS标头始终，因此您必须将中间件放在堆栈的顶部：

app.use(cors());                        // This is executed first, adds the
// headers and continues processing
app.use("/api/auth", authRoute);
app.use("/api/users", userRoute);
app.use("/api/products", productRoute); // This route handles the request
app.use("/api/carts", cartRoute);
app.use("/api/orders", orderRoute);

Answer 2

我也遇到了同样的问题，但我在server.js文件中用以下代码修复了它，其中的源代码是："https://127.0.0.1:5173"是我的前端的url，它将从后端请求数据

const cors = require("cors")
app.options("*", cors())
const corsOptions = {
origin:"http://127.0.0.1:5173"
}
app.use(cors(corsOptions))

Answer 3

首先，检查cors版本，如果不起作用，请尝试使用代理。

你可以使用代理如下，

在前端，pacakge.json只需添加这行代码。

"proxy": "http://localhost:5000",

在你的Axios.get中删除thiehttp://localhost:5000和

axios.get("http://localhost:5000/api/products");

相反，像这个一样

const res = axios.get("/api/products");

如果两者都不起作用，请尝试在服务器端安装并导入body解析器

installtion:
npm i body-parser
import:
const bodyParser = require('body-parser')

Answer 4

尝试在客户端的src文件夹中创建一个名为：setupProxy.js的文件。安装http设置代理

将其添加到setupProxy.js:

const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function (app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:5000',
changeOrigin: true,
}),
)
}

最后，重新启动应用程序。