محمود_سعداوي نشر 18 مايو 2023 أرسل تقرير مشاركة نشر 18 مايو 2023 السلام عليكم. يظهر لي الخطأ التالي Uncaught runtime errors: × ERROR Network Error AxiosError: Network Error at XMLHttpRequest.handleError (http://localhost:3000/static/js/bundle.js:40937:14) الكود import Axios from "axios" import { useEffect, useState} from 'react' const [users, setUsers] = useState([]) useEffect(()=> { Axios.get("http://localhost:5000/users") .then(res => setUsers(res.data)) } ,[]) مع العلم أن السيرفر يعمل بشكل جيد يعني تظهر كافة البيانات عند إدخال الرابط التالي http://localhost:5000/users شكرا 2 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 18 مايو 2023 أرسل تقرير مشاركة نشر 18 مايو 2023 قد تكون المشكلة من السيرفر حيث لا يقبل استقبال الطلبات من خادم مختلف، جرب استخدام cors على السيرفر ثم حاول مرة ثانية : var express = require('express') var cors = require('cors') var app = express() app.use(cors()) // باقي الكود 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Mustafa Suleiman نشر 18 مايو 2023 أرسل تقرير مشاركة نشر 18 مايو 2023 الخطأ "Network Error" يشير إلى حدوث خطأ في الشبكة أثناء إجراء الاستدعاء، وطالما أنك لا تواجه مشكلة في الخادم من جانب العميل وتستطيع رؤية البيانات، حاول تجربة التالي لحل المشكلة: 1- في بعض الأحيان، يمكن أن يتسبب تعطيل سياسات الأمان (CORS) في حدوث أخطاء شبكة، لذلك عليك تمكين CORS على الخادم الخاص بك للسماح بالطلبات القادمة من المستعرض. من خلال إضافة رأس (header) إلى استجابة الخادم للسماح بجميع المصادر. مثال: const express = require('express'); const app = express(); app.get('/users', (req, res) => { // رمز لاسترداد بيانات المستخدمين const users = [{ name: 'User 1' }, { name: 'User 2' }]; res.setHeader('Access-Control-Allow-Origin', '*'); res.json(users); }); app.listen(5000, () => { console.log('Server is running on port 5000'); }); 2- قد يكون هناك خطأ آخر في الجزء الخادم من التطبيق، تأكد من أن الخادم يعمل بشكل صحيح وأنه لا يوجد أخطاء في رمز الخادم الخاص بك. 3- تصحيح الكود الخاص بك للتأكد من استخدام Axios بشكل صحيح، حاول استخدام كود مشابه للتالي: import axios from 'axios'; import { useEffect, useState } from 'react'; const MyComponent = () => { const [users, setUsers] = useState([]); useEffect(() => { const fetchData = async () => { try { const response = await axios.get('http://localhost:5000/users'); setUsers(response.data); } catch (error) { console.error('Error fetching data:', error); } }; fetchData(); }, []); return ( // تقوم بعرض البيانات هنا ); }; export default MyComponent; تأكد من تغيير "Axios" إلى "axios" بالحرف الصغير في استيرادها حيث أنك تستوردها بالحرف الكبير. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 18 مايو 2023 الكاتب أرسل تقرير مشاركة نشر 18 مايو 2023 في الواقع و جدت الحل بفضلكما في الأول كان يجب إضافة const cors = require("cors") app.use(cors()) ثم قمت بإضافة async await داخل الخطاف useEffect() لم أقم بتغيير Axios أستاذ @Mustafa Suleiman في كل الحالات شكرا لكما أستاذ @Mustafa Suleiman @عمر قره محمد اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
محمود_سعداوي
السلام عليكم.
يظهر لي الخطأ التالي
Uncaught runtime errors:
×
ERROR
Network Error AxiosError: Network Error at XMLHttpRequest.handleError (http://localhost:3000/static/js/bundle.js:40937:14)
الكود
import Axios from "axios" import { useEffect, useState} from 'react' const [users, setUsers] = useState([]) useEffect(()=> { Axios.get("http://localhost:5000/users") .then(res => setUsers(res.data)) } ,[])
مع العلم أن السيرفر يعمل بشكل جيد يعني تظهر كافة البيانات عند إدخال الرابط التالي
http://localhost:5000/users
شكرا
رابط هذا التعليق
شارك على الشبكات الإجتماعية
3 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.