حلول TypeScript للوصول إلى localhost من الشبكة الخارجية

لماذا localhost سجن وكيف تهرب منه

تقوم بتشغيل الخادم على localhost:3000 أو 127.0.0.1:5173 أو [::1]:8080 — كل شيء يعمل بشكل مثالي. حتى تطلب من زميل أو صديق فتح مشروعك. وهنا تبدأ المشاكل: «الصفحة غير متاحة»، «Connection refused»، «ERR_CONNECTION_REFUSED». هل هذا مألوف لك؟

المشكلة هي أن localhost (أو 127.0.0.1) هو واجهة استرجاعية (loopback interface). خادمك يستمع فقط عليها. الأمر يشبه الصراخ في غرفة فارغة: تسمع نفسك، لكن لا أحد من الخارج يسمعك. في هذا المقال، سنشرح كيفية تحويل الخادم المحلي إلى خادم عام (أو على الأقل متاح على الشبكة المحلية) باستخدام TypeScript. بدون سحر، فقط طرق مجربة.

سنجيب على أكثر الأسئلة شيوعاً من Stack Overflow (حيث حصد هذا الموضوع آلاف المشاهدات) ونقدم حلولاً جاهزة لـ Express وNode.js وVite.

1. الأساسيات: ماذا يعني «الاستماع على جميع الواجهات»؟

عندما تكتب app.listen(3000) في Express، يستمع الخادم افتراضياً فقط على localhost. للسماح بالوصول من الخارج، يجب تحديد 0.0.0.0 (جميع واجهات IPv4) أو :: (جميع واجهات IPv6).

إليك كيف يبدو ذلك في TypeScript:

import express from 'express';\n\nconst app = express();\nconst PORT = 3000;\n\n// الاستماع على جميع الواجهات\napp.listen(PORT, '0.0.0.0', () => {\n  console.log(`الخادم يعمل على http://0.0.0.0:${PORT}`);\n  console.log(`متاح على الشبكة المحلية عبر عنوان IP الخاص بك`);\n});\n

الآن الخادم متاح ليس فقط على localhost، بل أيضاً عبر عنوان IP المحلي لجهاز الكمبيوتر الخاص بك (مثلاً 192.168.1.10:3000).

كيف تعرف عنوان IP المحلي الخاص بك؟

\n
• Windows: ipconfig → ابحث عن عنوان IPv4
\n
• macOS/Linux: ifconfig أو ip addr → السطر inet 192.168.x.x
\n

لكن هذه فقط الخطوة الأولى. غالباً ما تكون المشكلة أعمق — جدار الحماية، CORS، أو أن الخادم لا يزال لا يستجيب من الأجهزة الأخرى.

2. CORS: لماذا يحظر المتصفح الطلبات؟

حتى لو فتحت الوصول عبر الشبكة، قد يحظر المتصفح الطلبات من نطاق آخر. هذه سياسة CORS (مشاركة الموارد عبر الأصول). الحل هو ضبط الرؤوس (headers) على الخادم.

قم بتثبيت حزمة cors لـ Express:

npm install cors\nnpm install @types/cors --save-dev\n

قم بتضمينها في خادم TypeScript:

import express from 'express';\nimport cors from 'cors';\n\nconst app = express();\n\n// السماح بجميع المصادر (للتطوير)\napp.use(cors({\n  origin: '*',\n  methods: ['GET', 'POST', 'PUT', 'DELETE'],\n  allowedHeaders: ['Content-Type', 'Authorization']\n}));\n\napp.listen(3000, '0.0.0.0', () => {\n  console.log('CORS مفعل، الخادم متاح من الخارج');\n});\n

هام: في الإنتاج لا تستخدم origin: '*' — حدد النطاقات المحددة.

3. جدار الحماية: الحاجز الخفي

حتى إذا كان الخادم يستمع على 0.0.0.0، قد يقوم جدار الحماية (Firewall) بحظر الاتصالات الواردة. هذا سبب شائع لعدم عمل الوصول من الخارج.

كيف تفتح المنفذ (على سبيل المثال في Windows):

\n
• افتح «جدار حماية Windows Defender»
\n
• اضغط على «الإعدادات المتقدمة»
\n
• أنشئ قاعدة للاتصال الوارد
\n
• حدد المنفذ (مثلاً 3000) والبروتوكول (TCP)
\n
• اسمح بالاتصال
\n

على macOS/Linux استخدم ufw أو iptables:

# السماح بالمنفذ 3000 عبر ufw\nsudo ufw allow 3000/tcp\n

4. مشكلة خادم Vite