从源“http://localhost:3000”访问“http://localhost:5000/api/products”的 XMLHttpRequest 已被 CORS 策略阻止：无“访问控制”

Posted 2023-02-22

【中文标题】从源“http://localhost:3000”访问“http://localhost:5000/api/products”的 XMLHttpRequest 已被 CORS 策略阻止：无“访问控制”

【英文标题】：Access to XMLHttpRequest at 'http://localhost:5000/api/products' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Contr

【发布时间】：2021-12-26 04:27:24

【问题描述】：

我正在尝试通过邮递员使用 axios 获取在 db 上创建的数据，但我一直没有收到访问控制 cors 错误。我已将“Moesif Origin & CORS Changer”插件添加到我的 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");
);

【参考方案1】：

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

您可以使用如下代理，

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

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

然后在你的 Axios.get 中删除 http://localhost:5000 和

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

相反，这样做

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

如果两者都不起作用，请尝试在您的服务器端安装和导入 body-parser。

installtion:
npm i body-parser

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

【参考方案2】：

问题是您将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);

【讨论】：

谢谢。我打开了 Moesif Origin 和 Core Changer，一切正常。我意识到它从来没有在整个时间。我现在可以看到我的数据了。

【参考方案3】：

尝试在客户端的 src 文件夹中创建一个名为 setupProxy.js 的文件。 安装http-setup-proxy

将此添加到 setupProxy.js：

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

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