لماذا يحدث خطأ CORS في JavaScript بينما يعمل الطلب في Postman؟ نفهم الأمر

مرحبًا بالجميع! أنا مطور واجهة أمامية مبتدئ، وقد واجهت مشكلة تحيرني. أكتب تطبيق ويب بسيطًا بلغة JavaScript النقية. أحتاج إلى إرسال طلب POST إلى API خارجي (مثل https://api.example.com/data) للحصول على بعض البيانات. في وحدة تحكم المتصفح، أرى الخطأ:

تم حظر الوصول إلى 'https://api.example.com/data' من المصدر 'http://localhost:3000' بواسطة سياسة CORS: لا يوجد رأس 'Access-Control-Allow-Origin' في المورد المطلوب.

إليك الكود الخاص بي:

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('خطأ:', error));

لكن الغريب أنه عندما أنسخ نفس URL والطريقة وجسم الطلب إلى Postman - كل شيء يعمل بشكل مثالي! Postman يعيد النتيجة المتوقعة.