Proxy Requests with Vue.js

في تطوير تطبيقات الويب باستخدام Vue.js مع vue-cli، يمكنك بسهولة توجيه طلبات HTTP إلى خادم خلفي مستقل باستخدام ميزة التوجيه البروكسي. هذه الميزة تسمح لك بتوجيه جميع الطلبات من التطبيق الخاص بك إلى خادم آخر بواسطة خادم الويب الخاص بـ vue-cli.

للقيام بذلك، ابدأ بفتح ملف config/index.js في مشروعك الذي تم إنشاؤه باستخدام vue-cli، وابحث عن القسم المسؤول عن الخيارات الخاصة بالتوجيه البروكسي. ستجد شيئًا يشبه هذا:

javascriptCopy code
// config/index.js

module.exports = {
  // Other configurations...
  dev: {
    // Proxy config...
    proxyTable: {}
  }
}

قم بتعريف مسارات البروكسي التي ترغب في توجيهها إلى الخادم الخلفي في مصفوفة proxyTable بهذا الشكل:

javascriptCopy code
// config/index.js

module.exports = {
  // Other configurations...
  dev: {
    // Proxy config...
    proxyTable: {
      '/api': {
        target: 'http://backend-server-url.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

في هذا المثال، أعطينا مسارًا معينًا '/api' يتوقع أن يأتي من عميل Vue.js ونوجه جميع الطلبات التي تأتي إلى هذا المسار إلى http://backend-server-url.com. يُفضل أيضًا تعيين changeOrigin إلى true لضمان أن تكون رؤوس الطلبات المرسلة إلى الخادم الخلفي معدلة لتبدو كما لو كانت قادمة من الخادم نفسه. ويمكنك استخدام pathRewrite إذا كانت هناك حاجة لإعادة كتابة المسارات.

بعد تعديل هذا الملف، ستلاحظ أن جميع الطلبات التي تبدأ بـ /api ستوجه بشكل تلقائي إلى الخادم الخلفي المحدد.

بمجرد قيامك بذلك، يمكنك البدء في تطوير تطبيقك بشكل طبيعي، وستلاحظ أن جميع الطلبات التي تتم من عميل Vue.js إلى مسار /api ستتجه تلقائيًا إلى الخادم الخلفي المحدد بدلاً من الخادم المحلي. هذا يسهل تطوير التطبيق بشكل منفصل بين الجزء الأمامي والخلفي دون الحاجة إلى التعامل مع مشاكل CORS أو تكوينات خاصة بالخوادم في بيئة التطوير.

بالتأكيد، دعني أكمل المقال لتزويدك بمعلومات إضافية وتوجيهات لاستخدام هذه الإعدادات بشكل فعّال.

إعدادات إضافية:

التحكم في المزيد من المسارات:

إذا كنت بحاجة إلى توجيه المزيد من المسارات إلى الخادم الخلفي، يمكنك ببساطة إضافة مزيد من المفاتيح إلى proxyTable مع المسارات والخواص المطلوبة.

javascriptCopy code
// config/index.js

module.exports = {
  // Other configurations...
  dev: {
    // Proxy config...
    proxyTable: {
      '/api': {
        target: 'http://backend-server-url.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      },
      '/images': {
        target: 'http://image-server-url.com',
        changeOrigin: true,
        pathRewrite: {
          '^/images': ''
        }
      }
    }
  }
}

التكوين للإنتاج:

عند استخدام الخادم الخلفي في بيئة الإنتاج، يجب أن تكون ملفات التكوين مختلفة. يمكنك تحقيق ذلك عن طريق إضافة إعدادات البروكسي المناسبة إلى ملفات التكوين للإنتاج، مثل config/prod.env.js و config/dev.env.js.

التعامل مع المصادقة والتفاصيل الأمنية:

في بعض الحالات، قد تحتاج إلى تضمين معلومات المصادقة أو تفاصيل أمنية إضافية في طلباتك إلى الخادم الخلفي. يمكنك تضمين هذه التفاصيل كجزء من خصائص proxyTable.

الاستفادة من Middleware:

يمكنك أيضًا استخدام Middleware في الخادم الخلفي لتنفيذ مهام إضافية مثل المصادقة أو التفتيش على الطلبات قبل إرسالها إلى الخادم الفعلي.

الختام:

بهذه الخطوات، يمكنك بسهولة توجيه طلبات Vue.js الخاصة بك إلى خادم خلفي مستقل أثناء تطوير تطبيقاتك، مما يتيح لك فصل الجزء الأمامي والخلفي من التطبيق وتسهيل عملية التطوير والاختبار. تذكر دائمًا أن تقوم بالتحقق من تكوينات الأمان والمصادقة اللازمة في البيئات الإنتاجية لضمان سلامة التطبيق الخاص بك.