مشكلةتم الحل

حل أيرور الكورس: Blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present في Node.js / Express

·١٦ يوليو ٢٠٢٦·4 مشاهدة

يا جماعة أنا شغال على ابلكيشن React في الـ Frontend وبيشتغل على البورت http://localhost:3000 وبحاول أبعث طلب POST أو GET لـ API معمول بـ Node.js / Express شغال على بورت مختلف http://localhost:5000. المطلوب: جلب البيانات من الـ Backend وعرضها في الـ Frontend عادي جداً. المشكلة اللي مقابلاني: الطلب بيفشل والـ Console في المتصفح بيطلعلي الشريط الأحمر الشهير ده: Access to fetch at 'http://localhost:5000/api/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. مع إن السيرفر شغال تمام ولما بفتح الـ URL من المتصفح مباشرة أو من Postman البيانات بترجع عادي بدون أي مشكلة، المشكلة بتحصل بس لما بطلب البيانات من كود الـ React! كود السيرفر في Node.js (server.js):

JavaScript

const express = require('express');
const app = express();

app.use(express.json());

// السطر/الإعداد المفقود هنا هو السبب في منع المتصفح للطلبات الخارجية

app.get('/api/data', (req, res) => {
    res.json({ message: "البيانات رجعت بنجاح!" });
});

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

حل-أيرور-cors مشاكل-nodejs أخطاء-express-js مشاكل-javascript برمجة-back-end مشاكل-cors-policy أخطاء-متصفح كود-javascript حل-مشاكل-express

التعليقات (1)

الحل المعتمد

abdelrahmanمنذ 90 يوم

دي ميزة أمان في المتصفحات اسمها Same-Origin Policy (SOP). المتصفح بيمنع أي كود JavaScript شغال على Domain أو Port معين (زي localhost:3000) إنه يطلب بيانات من Domain أو Port تاني (زي localhost:5000) إلا إذا السيرفر (الـ Backend) سمح بكده صراحة عن طريق إرسال الـ Header المناسب (Access-Control-Allow-Origin). الحل الصحيح والنهائي: تثبيت مكتبة cors في مشروع الـ Node.js وتفعيلها كـ Middleware في السيرفر: قم بتثبيت المكتبة عبر التيرمنال: npm install cors قم باستدعاء وتفعيل المكتبة في ملف server.js:

JavaScript

const express = require('express');
const cors = require('cors'); // 1. استدعاء مكتبة cors
const app = express();

// 2. تفعيل الـ CORS لتسمح للـ Frontend بالوصول للـ API
app.use(cors()); 

app.use(express.json());

app.get('/api/data', (req, res) => {
    res.json({ message: "البيانات رجعت بنجاح!" });
});

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

سجّل دخولك لإضافة تعليق

تسجيل الدخول

حل أيرور الكورس: Blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present في Node.js / Express

kamel

·١٦ يوليو ٢٠٢٦·4 مشاهدة

JavaScript

const express = require('express');
const app = express();

app.use(express.json());

// السطر/الإعداد المفقود هنا هو السبب في منع المتصفح للطلبات الخارجية

app.get('/api/data', (req, res) => {
    res.json({ message: "البيانات رجعت بنجاح!" });
});

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

const express = require('express'); const cors = require('cors'); // 1. استدعاء مكتبة cors const app = express(); // 2. تفعيل الـ CORS لتسمح للـ Frontend بالوصول للـ API app.use(cors()); app.use(express.json()); app.get('/api/data', (req, res) => { res.json({ message: "البيانات رجعت بنجاح!" }); }); app.listen(5000, () => { console.log('Server running on port 5000'); });