مشكلة CORS في تطبيق ويب

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

في معظم الحالات، يتم تعيين رأس Access-Control-Allow-Origin على الخادم ليحدد النطاقات المسموح لها بالوصول إلى الموارد كمثال، إذا كنت تحاول الوصول إلى هذه الرابط https://example.com، يجب أن يتم تعيين الرأس Access-Control-Allow-Origin على الخادم 

و لحل هذه المشكله يمكنك تعديل ملف .htaccess files 
واضافة سطر الكود هذه به

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, PUT, POST, DELETE"
Header set Access-Control-Allow-Headers "Content-Type, Authorization"

ان مشكلة ال cors تحدث حيث ان السيرفر لا يسمح باستقبال الطلبات من خارج الخادم وذلك لتوفير امان المعلومات ومنع قراءة المعلومات من مصادر مجهولة.

واذا كنت تستعمل nodejs فان الامر سهل يمكنك كتابة هذه الاسطر فى ملف السيرفر للسماح بتنفيذ الطلبات من اى مصدر .

const cors = require('cors');


app.use(cors());

بتاريخ 3 دقائق مضت قال محمد_عاطف:

ان مشكلة ال cors تحدث حيث ان السيرفر لا يسمح باستقبال الطلبات من خارج الخادم وذلك لتوفير امان المعلومات ومنع قراءة المعلومات من مصادر مجهولة.

واذا كنت تستعمل nodejs فان الامر سهل يمكنك كتابة هذه الاسطر فى ملف السيرفر للسماح بتنفيذ الطلبات من اى مصدر .

const cors = require('cors');


app.use(cors());

 

الان انا استخدم Nuxt 3 فماذا الحل ؟

في الواجهة الخلفية للتطبيق لديك، عليك تثبيت حزمة CORS:

npm install cors

ثم تضيف الكود التالي في ملف الخادم الخاص بك app.js

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


var app = express();
app.use(cors());

لاحظ استخدام app.use(cors()) بعد app = express().

ولا تنسى تشغيل الخادم server عن طريق الأمر npm start.

وعامًة مشكلة الـ CORS، هي ببساطة ناتجة عن سياسة الأمان "Cross-Origin Resource Sharing" والتي تمنع التطبيقات التي تعمل على نطاق معين من الوصول إلى الموارد من نطاق آخر.

للتوضيح فرضًا، يحاول تطبيق الويب الذي يعمل على http://localhost:3000 الوصول إلى البيانات من https://example.com/api/data. نظرًا لأن هذه النطاقات مختلفة، فإن سياسة CORS تمنع هذا الطلب.  

والحل السابق في حال أنك تستخدم Node.js، لكنك ذكرت أنك تستخدم nuxtjs الإصدار 3، فعليك استخدام  useFetch لجلب البيانات من API وكمثال:

<script setup lang="ts">
const { data: count } = await useFetch('/api/count')
</script>

<template>
  <p>Page visits: {{ count }}</p>
</template>

بحيث يتم إرسال الطلب عن طريق الخادم.

https://nuxt.com/docs/getting-started/data-fetching#usefetch

بتاريخ 6 دقائق مضت قال Ahmed Naseem:

الان انا استخدم Nuxt 3 فماذا الحل ؟

هل الخادم (الواجهة الخلفية) خاص بك ام لا . لانه اذا لم يكن خاص بك فمن الممكن ان مالك الخادم قام بعدم تفعيل ال cors . وللتاكد من هذا يمكنك استدعاء عنوان ال api فى برنامج post man والتاكد من اذا كان يعمل ام لا . واذا كان يعمل على post man فيمكنك استخدام fetch عن طريق الخادم وليس عن طريق المتصفح .