xmlhttprequest توسط سیاست CORS مسدود شده است: – جامعه dev

خطا
“دسترسی به xmlhttprequest در” http: // localhost: 5001/auth/regist “از مبدا” http: // localhost: 3000 “توسط خط مشی CORS مسدود شده است: پاسخ به درخواست پیش نمایش ، کنترل کنترل دسترسی را انجام نمی دهد: بدون” دسترسی-کانتررول-اسیلین-اورگین 'هدر در منابع درخواست شده موجود است. “

راه حل

این خطا به این دلیل رخ می دهد که سرور باطن شما (LocalHost: 5001) به دلیل محدودیت های خط مشی ، درخواست های جلوی شما (LocalHost: 3000) را به شما اجازه نمی دهد. برای رفع این مشکل ، باید پس زمینه خود را پیکربندی کنید تا درخواست های جلوی خود اجازه دهید.

اصلاح برای Node.js (Express) Backend

اگر از Express.js استفاده می کنید ، بسته CORS را نصب کرده و آن را پیکربندی کنید:

1. cors را نصب کنید

این دستور را در پروژه باطن خود اجرا کنید:

npm install cors

2. کد باطن خود را به روز کنید

کد سرور اکسپرس خود را اصلاح کنید (index.js یا server.js):

const express = require("express");
const cors = require("cors");

const app = express();

// Allow requests from frontend (localhost:3000)
app.use(cors({
    origin: "http://localhost:3000",
    methods: ["GET", "POST", "PUT", "DELETE"],
    allowedHeaders: ["Content-Type", "Authorization"]
}));

app.use(express.json());

// Your routes here...
app.post("/auth/register", (req, res) => {
    res.json({ message: "User registered successfully" });
});

app.listen(5001, () => {
    console.log("Server running on port 5001");
});

جایگزین: COR را برای همه منشاء فعال کنید (موقت)

برای اهداف اشکال زدایی ، می توانید به همه ریشه ها اجازه دهید:

app.use(cors());

در صورت استفاده از Fetch در جلو

اطمینان حاصل کنید که درخواست واکشی شما در React شامل حالت است: “cors”:

fetch("http://localhost:5001/auth/register", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({ username: "ashwani", password: "123456" }),
    mode: "cors"
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error("Error:", error));