اذهب إلى المحتوى
  • 0

خطأ جلب البيانات من الخادم بواسطة axios

محمود_سعداوي

السؤال

السلام عليكم.

يظهر لي الخطأ التالي 

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

شكرا

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

قد تكون المشكلة من السيرفر حيث لا يقبل استقبال الطلبات من خادم مختلف، جرب استخدام cors على السيرفر ثم حاول مرة ثانية :

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

// باقي الكود
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

 الخطأ "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" بالحرف الصغير في استيرادها حيث أنك تستوردها بالحرف الكبير.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

في الواقع و جدت الحل بفضلكما

في الأول كان يجب إضافة

const cors = require("cors")
app.use(cors())

ثم قمت بإضافة async await داخل الخطاف useEffect()

لم أقم بتغيير Axios  أستاذ @Mustafa Suleiman

في كل الحالات شكرا لكما أستاذ @Mustafa Suleiman @عمر قره محمد

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...