جلب Api للوقت الحالي باستخدام axious

الخطأ يحدث لأنك تحاول الوصول إلى موارد API من موقع آخر، ويتم منع ذلك بسبب سياسة الـCORS، ويتم ذلك لأسباب أمنية لمنع الوصول غير المصرح به إلى بيانات المستخدم.

لحل هذا المشكلة، يجب تمكين الوصول لمصدر الموارد في الخادم الذي تستخدمه. وفي حال لم تكن تملك خادم خاص بك، يمكنك استخدام خدمات بروكسي مثل CORS Anywhere أو بدائل أخرى لتفادي هذه المشكلة.

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

يمكنك قراءة المزيد عن سياسة CORS وطرق تجاوزها من هنا:

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

لذلك، يمكن تعديل الرابط في الطلب ليتضمن عنوان بروكسي، على سبيل المثال:

axios.get('https://cors-anywhere.herokuapp.com/https://timeapi.io/api/Time/current/zone?timeZone=Africa/Tripoli')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
});

المثال يستخدم خدمة بروكسي مجانية تسمى "CORS Anywhere"، والتي تضيف رأس "Access-Control-Allow-Origin" إلى الطلب لحل مشكلة CORS. ويجب الانتباه إلى أنه يجب استخدام خدمات بروكسي بحذر، وتأكد من أن المصدر المستخدم هو موثوق به وآمن.

هذا الخطأ يحدث عندما يتم منع طلب API من المصادر المختلفة لحماية الأمان (CORS). لمعالجة هذا الخطأ، يجب إزالة هذا الحماية من جانب الموارد التي تريد الوصول إليها او اضافة الـ `Access-Control-Allow-Origin ` header.

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

للحصول على الوقت الحالي باستخدام API Timezonedb و Axios في لغة الجافاسكريبت، يمكنك استخدام الكود التالي:

const axios = require('axios');

function getCurrentTime(timezone, apiKey) {
  const url = `http://api.timezonedb.com/v2.1/get-time-zone?key=${apiKey}&format=json&by=zone&zone=${timezone}`;
  return axios.get(url)
    .then(response => {
        const currentTime = new Date(response.data.formatted);
        return currentTime;
    })
    .catch(error => {
        console.log(error);
    });
}

// مثال علي مدينة
const timezone = 'Asia/Baghdad';
const apiKey = 'your_api_key_here';
getCurrentTime(timezone, apiKey)
  .then(currentTime => {
    console.log('Current time is:', currentTime);
  })
  .catch(error => {
    console.log(error);
  });

ضع في الاعتبار أنك ستحتاج إلى التسجيل في Timezonedb للحصول على مفتاح API الخاص بك ووضعه في مكان "apiKey" في الرمز أعلاه. كما يجب تغيير المكان/المدينة المذكورة في "timezone" إلى المدينة التي تريد الحصول على الوقت الحالي لها.

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

تثبيت امتداد moesif CORS. بمجرد التثبيت ، انقر على الأيقونة في متصفحك لتنشيط الامتداد.  

هل يظهر هذا الخطأ بمجرد عمل console log?

بتاريخ الآن قال Mustafa Suleiman:

الخطأ يحدث لأنك تحاول الوصول إلى موارد API من موقع آخر، ويتم منع ذلك بسبب سياسة الـCORS، ويتم ذلك لأسباب أمانية لمنع الوصول غير المصرح به إلى بيانات المستخدم.

لحل هذا المشكلة، يجب تمكين الوصول لمصدر الموارد في الخادم الذي تستخدمه. وفي حال لم تكن تملك خادم خاص بك، يمكنك استخدام خدمات بروكسي مثل CORS Anywhere أو بدائل أخرى لتفادي هذه المشكلة.

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

 

يمكنك قراءة المزيد عن سياسة CORS وطرق تجاوزها من هنا:

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

لذلك، يمكن تعديل الرابط في الطلب ليتضمن عنوان بروكسي، على سبيل المثال:

axios.get('https://cors-anywhere.herokuapp.com/https://timeapi.io/api/Time/current/zone?timeZone=Africa/Tripoli')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
});

المثال يستخدم خدمة بروكسي مجانية تسمى "CORS Anywhere"، والتي تضيف رأس "Access-Control-Allow-Origin" إلى الطلب لحل مشكلة CORS. ويجب الانتباه إلى أنه يجب استخدام خدمات بروكسي بحذر، وتأكد من أن المصدر المستخدم هو موثوق به وآمن.

الكود شغال عندي بدون مشاكل والسيرفر يدعم الاتصال لا حاجة للبروكسي

جرب كتابة ما يلي:

const config = {
  headers:{
    "Access-Control-Allow-Origin": "*"
  }
};

axios.get("الرابط", config)

طبعاً باقي الكود يبقى كما هو، أي أننا نحاول وضع ترويسة معينة عند إرسال الطلب لا أكثر.

بتاريخ منذ ساعة مضت قال Mustafa Suleiman:

الخطأ يحدث لأنك تحاول الوصول إلى موارد API من موقع آخر، ويتم منع ذلك بسبب سياسة الـCORS، ويتم ذلك لأسباب أمانية لمنع الوصول غير المصرح به إلى بيانات المستخدم.

لحل هذا المشكلة، يجب تمكين الوصول لمصدر الموارد في الخادم الذي تستخدمه. وفي حال لم تكن تملك خادم خاص بك، يمكنك استخدام خدمات بروكسي مثل CORS Anywhere أو بدائل أخرى لتفادي هذه المشكلة.

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

يمكنك قراءة المزيد عن سياسة CORS وطرق تجاوزها من هنا:

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

لذلك، يمكن تعديل الرابط في الطلب ليتضمن عنوان بروكسي، على سبيل المثال:

axios.get('https://cors-anywhere.herokuapp.com/https://timeapi.io/api/Time/current/zone?timeZone=Africa/Tripoli')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
});

المثال يستخدم خدمة بروكسي مجانية تسمى "CORS Anywhere"، والتي تضيف رأس "Access-Control-Allow-Origin" إلى الطلب لحل مشكلة CORS. ويجب الانتباه إلى أنه يجب استخدام خدمات بروكسي بحذر، وتأكد من أن المصدر المستخدم هو موثوق به وآمن.

شكرا 

بتاريخ 41 دقائق مضت قال Mohammed Fahmy3:

هذا الخطأ يحدث عندما يتم منع طلب API من المصادر المختلفة لحماية الأمان (CORS). لمعالجة هذا الخطأ، يجب إزالة هذا الحماية من جانب الموارد التي تريد الوصول إليها او اضافة الـ `Access-Control-Allow-Origin ` header.

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

للحصول على الوقت الحالي باستخدام API Timezonedb و Axios في لغة الجافاسكريبت، يمكنك استخدام الكود التالي:

const axios = require('axios');

function getCurrentTime(timezone, apiKey) {
  const url = `http://api.timezonedb.com/v2.1/get-time-zone?key=${apiKey}&format=json&by=zone&zone=${timezone}`;
  return axios.get(url)
    .then(response => {
        const currentTime = new Date(response.data.formatted);
        return currentTime;
    })
    .catch(error => {
        console.log(error);
    });
}

// مثال علي مدينة
const timezone = 'Asia/Baghdad';
const apiKey = 'your_api_key_here';
getCurrentTime(timezone, apiKey)
  .then(currentTime => {
    console.log('Current time is:', currentTime);
  })
  .catch(error => {
    console.log(error);
  });

ضع في الاعتبار أنك ستحتاج إلى التسجيل في Timezonedb للحصول على مفتاح API الخاص بك ووضعه في مكان "apiKey" في الرمز أعلاه. كما يجب تغيير المكان/المدينة المذكورة في "timezone" إلى المدينة التي تريد الحصول على الوقت الحالي لها.

 

شكرًا، يبدوا أن هذا الخيار أفضل 

بتاريخ منذ ساعة مضت قال Kais Hasan:

جرب كتابة ما يلي:

const config = {
  headers:{
    "Access-Control-Allow-Origin": "*"
  }
};

axios.get("الرابط", config)

طبعاً باقي الكود يبقى كما هو، أي أننا نحاول وضع ترويسة معينة عند إرسال الطلب لا أكثر.

لم يتغير شيء لكن عمومًا جربت باقي الحلول ونجح الأمر