ReactJS: کروم CORS پلگ ان کو شامل کرنے کے بعد، Unhandled Rejected (TypeError) بازیافت کرنے میں ناکام

رد عمل میں API کی خرابیوں کو سنبھالنا: CORS پلگ ان چیلنجز

میں APIs کے ساتھ کام کرتے وقت ReactJS، ڈویلپرز کو اکثر ڈیٹا کی بازیافت سے متعلق مختلف چیلنجوں کا سامنا کرنا پڑتا ہے، خاص طور پر جب فریق ثالث APIs کے ساتھ کام کرتے ہیں۔ ایک عام مسئلہ جو پیدا ہوتا ہے وہ ہے "Unhandled Rejection (TypeError): Failed to fetch" ایرر۔ یہ خرابی اس وقت بھی ہو سکتی ہے جب مقبول APIs جیسے Swiggy's restaurant list API، جسے بہت سے ڈویلپر اپنی ویب ایپلیکیشنز کو بڑھانے کے لیے استعمال کرتے ہیں۔

اس صورت میں، CORS کروم ایکسٹینشن کو شامل کرنا براؤزر کی پابندی والی پالیسیوں کو نظرانداز کرنے کے لیے ایک قابل عمل حل کی طرح لگتا ہے۔ تاہم، یہ مسئلہ کو حل کرنے کے بجائے نئی پیچیدگیوں کو متعارف کر سکتا ہے. اگر آپ اپنے ڈیولپمنٹ ماحول میں CORS پلگ ان استعمال کر رہے ہیں، اور آپ کی API کی درخواستیں لوڈ ہونے کے فوراً بعد ناکام ہو جاتی ہیں، تو ہو سکتا ہے کہ آپ ایک ایسے مسئلے کا شکار ہو جائیں جہاں پلگ ان براؤزر کے درخواست سے نمٹنے کے رویے سے متصادم ہو۔

کراس اوریجن درخواستوں کا نظم کرنے اور ٹربل شوٹ کرنے کا طریقہ سمجھنا CORS کی غلطیاں ReactJS میں ترقی کے ہموار عمل کے لیے ضروری ہے۔ Swiggy's جیسے APIs میں اکثر حفاظتی پرتیں ہوتی ہیں، جیسے CORS، غیر مجاز کلائنٹس سے رسائی کو کنٹرول کرنے کے لیے۔ یہ پابندیاں غلطیاں پیدا کر سکتی ہیں جن کو ٹھیک طریقے سے حل کرنے کی ضرورت ہے۔

اس گائیڈ میں، ہم دریافت کریں گے کہ یہ خرابی کیوں پیش آتی ہے، خاص طور پر کروم میں CORS پلگ ان شامل کرنے کے بعد۔ ہم آپ کے میں Swiggy API کے ساتھ کام کرتے ہوئے اسے حل کرنے کی حکمت عملیوں پر بھی بات کریں گے۔ رد عمل ایپلی کیشنز

Swiggy API کے ساتھ رد عمل میں CORS کے مسائل کے حل کی وضاحت

پہلے حل میں، ہم نے a Node.js Swiggy's API سے ریستوراں کا ڈیٹا حاصل کرتے وقت CORS کے مسئلے کو نظرانداز کرنے کے لیے ایکسپریس کا استعمال کرتے ہوئے بیک اینڈ۔ CORS پالیسی براؤزرز کو مختلف ڈومین کی درخواستیں کرنے سے روکتی ہے جب تک کہ وہ ڈومین اس کی اجازت نہ دے۔ ایک سادہ سرور بنا کر، ہم کلائنٹ اور API کے درمیان درمیانی پرت کے طور پر کام کر سکتے ہیں، ڈیٹا سرور سائیڈ کو لا کر اسے React فرنٹ اینڈ پر واپس کر سکتے ہیں۔ یہ طریقہ CORS کی غلطیوں سے بچتا ہے کیونکہ درخواست کلائنٹ ایپ کے طور پر اسی اصل سے آتی ہے۔

ایکسپریس پسدید اپنی مرضی کے ہیڈر ترتیب دیتا ہے، خاص طور پر رسائی-کنٹرول-اجازت-اصل، جو ہمارے کلائنٹ کو CORS پابندیوں کا سامنا کیے بغیر وسائل کی درخواست کرنے کی اجازت دیتا ہے۔ Swiggy's API پر بازیافت کال کو سرور سائیڈ بنایا گیا ہے، اور ڈیٹا JSON فارمیٹ میں واپس کیا جاتا ہے۔ اس نقطہ نظر کو اکثر پیداواری ماحول میں زیادہ محفوظ اور کارآمد سمجھا جاتا ہے کیونکہ یہ API کیز یا حساس معلومات کو چھپاتا ہے۔ مزید برآں، ٹرائی کیچ کا استعمال مناسب غلطی سے نمٹنے کو یقینی بناتا ہے، اگر API جواب دینے میں ناکام ہو جاتا ہے تو صارف کے موافق غلطی کے پیغامات دکھاتا ہے۔

دوسرے حل میں، ہم کلائنٹ سائیڈ ری ایکٹ کوڈ پر بازیافت کی درخواست میں ترمیم کرتے ہیں۔ اس طریقہ کار میں بازیافت کال میں حسب ضرورت ہیڈر شامل کرنا شامل ہے، اس بات کو یقینی بنانا کہ درخواست کو API تک پہنچنے سے پہلے درست طریقے سے فارمیٹ کیا گیا ہے۔ ہم رد عمل کا استعمال کرتے ہیں۔ اثر استعمال کریں جب جزو ماؤنٹ ہوتا ہے تو API کال کو متحرک کرنے کے لیے ہک۔ async فنکشن API کے جواب کا انتظار کرتا ہے، اسے JSON میں تبدیل کرتا ہے، اور درخواست ناکام ہونے پر غلطیوں کو ہینڈل کرتا ہے۔ تاہم، اس حل کو اب بھی CORS مسائل کا سامنا ہے اگر API براہ راست براؤزرز سے کراس اوریجن درخواستوں کی اجازت نہیں دیتا ہے۔

آخر میں، تیسرے حل میں، ہم ایک فریق ثالث کی خدمت استعمال کرتے ہیں جسے CORS-Anywhere کہتے ہیں۔ یہ ایک مڈل ویئر سروس ہے جو اپنے سرور کے ذریعے API کی درخواست کو ری روٹ کرکے عارضی طور پر CORS پابندیوں کو نظرانداز کرنے میں مدد کرتی ہے۔ اگرچہ یہ حل ترقیاتی ماحول میں کام کر سکتا ہے، لیکن حفاظتی خطرات اور بیرونی خدمات پر انحصار کی وجہ سے پیداوار کے لیے اس کی سفارش نہیں کی جاتی ہے۔ یہ پرفارمنس اوور ہیڈ کو بھی متعارف کراتی ہے کیونکہ یہ ڈیٹا حاصل کرنے کے عمل میں ایک اضافی پرت کا اضافہ کرتا ہے۔ جانچ کے مراحل کے دوران اس طریقہ کا استعمال آسان ہو سکتا ہے لیکن حفاظتی وجوہات کی بنا پر پیداوار میں اس سے گریز کرنا چاہیے۔

const express = require('express');
const fetch = require('node-fetch');
const app = express();
const port = 5000;

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET');
  next();
});

app.get('/restaurants', async (req, res) => {
  try {
    const response = await fetch('https://www.swiggy.com/dapi/restaurants/list/v5?lat=23.1685786&lng=79.9338798');
    const data = await response.json();
    res.json(data);
  } catch (err) {
    res.status(500).json({ error: 'Failed to fetch restaurants' });
  }
});

app.listen(port, () => {
  console.log(`Server running on http://localhost:${port}`);
});

import React, { useEffect } from 'react';

const Body = () => {
  async function getRestaurants() {
    try {
      const response = await fetch(
        'https://www.swiggy.com/dapi/restaurants/list/v5?lat=23.1685786&lng=79.9338798',
        { headers: { 'Content-Type': 'application/json' } }
      );

      if (!response.ok) {
        throw new Error('Network response was not ok');
      }

      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error('Fetch error:', error);
    }
  }

  useEffect(() => {
    getRestaurants();
  }, []);
};

export default Body;

const Body = () => {
  async function getRestaurants() {
    try {
      const response = await fetch(
        'https://cors-anywhere.herokuapp.com/https://www.swiggy.com/dapi/restaurants/list/v5?lat=23.1685786&lng=79.9338798'
      );

      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error('Error fetching restaurants:', error);
    }
  }

  useEffect(() => {
    getRestaurants();
  }, []);
};

export default Body;

API کی درخواستوں میں CORS کے مسائل کا ازالہ کرنا

ری ایکٹ ایپلی کیشن میں "فیچ کرنے میں ناکام" غلطی کی بنیادی وجوہات میں سے ایک، خاص طور پر سوئگی جیسے تھرڈ پارٹی APIs کا استعمال کرتے وقت، CORS (کراس اوریجن ریسورس شیئرنگ) پابندیاں۔ CORS ایک حفاظتی خصوصیت ہے جو ویب ایپلیکیشنز کو اس سے مختلف ڈومین پر درخواستیں کرنے سے روکتی ہے جہاں سے انہیں پیش کیا گیا تھا۔ اس صورت میں، Swiggy API درخواست کو مسترد کر دیتا ہے کیونکہ یہ ایک مختلف ڈومین (آپ کی React ایپ) سے نکلتی ہے۔ یہ خاص طور پر پریشانی کا باعث ہے جب آپ APIs سے ڈیٹا حاصل کر رہے ہیں جو واضح طور پر کراس اوریجن درخواستوں کی حمایت نہیں کرتے ہیں۔

ایک عام حل براؤزر ایکسٹینشن کا استعمال کرنا ہے جیسے "CORS کی اجازت دیں" کروم ایکسٹینشن۔ تاہم، اس طرح کی توسیع متضاد نتائج کی قیادت کر سکتے ہیں. اس کی وجہ یہ ہے کہ وہ براؤزر کی سطح کی ترتیبات میں ہیرا پھیری کرتے ہیں جو ہمیشہ API کی درخواستوں کے ساتھ مناسب طریقے سے ہم آہنگ نہیں ہوتی ہیں۔ یہ پلگ ان مثالی طور پر صرف ترقی کے لیے استعمال کیے جائیں نہ کہ پیداواری ماحول میں۔ پیداوار کے لیے، ایک محفوظ اور زیادہ قابل اعتماد نقطہ نظر بیک اینڈ پراکسی سرور کا استعمال کرے گا جو آپ کے React ایپ کی جانب سے ڈیٹا کی درخواست کرتا ہے، جیسا کہ پہلے فراہم کردہ حلوں میں دیکھا گیا ہے۔

غور کرنے کا ایک اور پہلو غلطیوں کو مؤثر طریقے سے سنبھالنا ہے۔ اگرچہ CORS کے مسائل "فیچ کرنے میں ناکام" کی خرابیوں کی ایک عام وجہ ہیں، دوسرے عوامل جیسے نیٹ ورک کی عدم استحکام، غلط API URLs، یا سرور کا ڈاؤن ٹائم بھی اس خرابی کا نتیجہ ہو سکتا ہے۔ لہذا، لاگو کرنا ضروری ہے مضبوط غلطی ہینڈلنگ آپ کے کوڈ میں، خاص طور پر جب فریق ثالث APIs کے ساتھ کام کریں۔ غلطی سے نمٹنے کا ایک مناسب طریقہ کار اس مسئلے کو زیادہ مؤثر طریقے سے ڈیبگ کرنے میں مدد کرے گا اور کچھ غلط ہونے پر صارف کے لیے دوستانہ پیغامات فراہم کرے گا۔