ReactJS: Chrome CORS প্লাগইন যোগ করার পরে, আনহ্যান্ডেল প্রত্যাখ্যান (TypeError) আনতে ব্যর্থ হয়েছে

প্রতিক্রিয়ায় API ত্রুটিগুলি পরিচালনা করা: CORS প্লাগইন চ্যালেঞ্জগুলি৷

এপিআই এর সাথে কাজ করার সময় ReactJS, ডেভেলপাররা প্রায়ই ডেটা আনার সাথে সম্পর্কিত বিভিন্ন চ্যালেঞ্জের সম্মুখীন হয়, বিশেষ করে যখন তৃতীয় পক্ষের API-এর সাথে কাজ করে। একটি সাধারণ সমস্যা যা দেখা দেয় তা হল "আনহ্যান্ডেলড প্রত্যাখ্যান (TypeError): আনয়ন করতে ব্যর্থ" ত্রুটি৷ Swiggy's restaurant list API এর মতো জনপ্রিয় API ব্যবহার করার সময়ও এই ত্রুটি ঘটতে পারে, যা অনেক ডেভেলপার তাদের ওয়েব অ্যাপ্লিকেশনগুলিকে উন্নত করতে ব্যবহার করে।

এই ক্ষেত্রে, একটি CORS Chrome এক্সটেনশন যোগ করা সীমাবদ্ধ ব্রাউজার নীতিগুলিকে বাইপাস করার জন্য একটি কার্যকর সমাধান বলে মনে হতে পারে। যাইহোক, এটি সমস্যা সমাধানের পরিবর্তে নতুন জটিলতা প্রবর্তন করতে পারে। আপনি যদি আপনার ডেভেলপমেন্ট এনভায়রনমেন্টে একটি CORS প্লাগইন ব্যবহার করেন, এবং আপনার API অনুরোধগুলি লোড হওয়ার কিছুক্ষণ পরেই ব্যর্থ হয়, তাহলে আপনি একটি সমস্যায় পড়তে পারেন যেখানে প্লাগইনটি ব্রাউজারের অনুরোধ-হ্যান্ডলিং আচরণের সাথে বিরোধপূর্ণ।

ক্রস-অরিজিন অনুরোধগুলি এবং সমস্যা সমাধান কীভাবে পরিচালনা করবেন তা বোঝা CORS ত্রুটি ReactJS-এ একটি মসৃণ উন্নয়ন প্রক্রিয়ার জন্য অপরিহার্য। অননুমোদিত ক্লায়েন্টদের কাছ থেকে অ্যাক্সেস নিয়ন্ত্রণ করার জন্য Swiggy-এর মতো API-এ প্রায়ই নিরাপত্তা স্তর থাকে, যেমন CORS। এই বিধিনিষেধগুলি ত্রুটির কারণ হতে পারে যা সঠিকভাবে সমাধান করা প্রয়োজন৷

এই নির্দেশিকায়, আমরা অন্বেষণ করব কেন এই ত্রুটিটি ঘটে, বিশেষ করে Chrome এ একটি CORS প্লাগইন যোগ করার পরে। আপনার Swiggy API এর সাথে কাজ করার সময় আমরা এটি সমাধান করার কৌশলগুলি নিয়েও আলোচনা করব প্রতিক্রিয়া অ্যাপ্লিকেশন

Swiggy API এর সাথে প্রতিক্রিয়ায় CORS সমস্যার সমাধান ব্যাখ্যা করা

প্রথম সমাধানে, আমরা একটি তৈরি করেছি Node.js Swiggy's API থেকে রেস্তোরাঁর ডেটা আনার সময় CORS সমস্যাটি বাইপাস করতে Express ব্যবহার করে ব্যাকএন্ড। CORS নীতি ব্রাউজারগুলিকে একটি ভিন্ন ডোমেনে অনুরোধ করতে বাধা দেয় যদি না সেই ডোমেন এটির অনুমতি দেয়৷ একটি সাধারণ সার্ভার তৈরি করে, আমরা ক্লায়েন্ট এবং API-এর মধ্যে একটি মধ্যম স্তর হিসাবে কাজ করতে পারি, ডেটা সার্ভার-সাইড আনয়ন করতে পারি এবং এটিকে রিঅ্যাক্ট ফ্রন্ট-এন্ডে ফিরিয়ে দিতে পারি। এই পদ্ধতিটি CORS ত্রুটিগুলি এড়ায় কারণ অনুরোধটি ক্লায়েন্ট অ্যাপের মতো একই উত্স থেকে আসে৷

এক্সপ্রেস ব্যাকএন্ড কাস্টম হেডার সেট আপ করে, বিশেষ করে অ্যাক্সেস-নিয়ন্ত্রণ-অনুমতি-উৎপত্তি, যা আমাদের ক্লায়েন্টকে CORS সীমাবদ্ধতার সম্মুখীন না হয়ে সংস্থানগুলির জন্য অনুরোধ করতে দেয়৷ Swiggy-এর API-এ আনা কল সার্ভার-সাইড করা হয় এবং ডেটা JSON ফর্ম্যাটে ফেরত দেওয়া হয়। এই পদ্ধতিটি প্রায়শই উত্পাদন পরিবেশে আরও নিরাপদ এবং কার্যকরী হিসাবে বিবেচিত হয় কারণ এটি API কী বা সংবেদনশীল তথ্য লুকিয়ে রাখে। অধিকন্তু, ট্রাই-ক্যাচের ব্যবহার যথাযথ ত্রুটি পরিচালনা নিশ্চিত করে, ব্যবহারকারী-বান্ধব ত্রুটি বার্তা প্রদর্শন করে যদি API সাড়া দিতে ব্যর্থ হয়।

দ্বিতীয় সমাধানে, আমরা ক্লায়েন্ট-সাইড প্রতিক্রিয়া কোডে আনার অনুরোধ পরিবর্তন করি। এই পদ্ধতিতে আনয়ন কলে কাস্টম শিরোনাম যোগ করা জড়িত, যাতে নিশ্চিত করা হয় যে API এ পৌঁছানোর আগে অনুরোধটি সঠিকভাবে ফর্ম্যাট করা হয়েছে। আমরা প্রতিক্রিয়া এর ব্যবহার ইফেক্ট ব্যবহার করুন কম্পোনেন্ট মাউন্ট হলে API কল ট্রিগার করতে হুক। অ্যাসিঙ্ক ফাংশন 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 সমস্যা সমাধান করা

একটি প্রতিক্রিয়া অ্যাপ্লিকেশনে "আনয়নে ব্যর্থ" ত্রুটির একটি অন্তর্নিহিত কারণ, বিশেষ করে যখন Swiggy-এর মতো তৃতীয় পক্ষের API ব্যবহার করা হয়, CORS (ক্রস-অরিজিন রিসোর্স শেয়ারিং) সীমাবদ্ধতা। CORS হল একটি নিরাপত্তা বৈশিষ্ট্য যা ওয়েব অ্যাপ্লিকেশনগুলিকে যে ডোমেনে পরিবেশন করা হয়েছিল তার চেয়ে ভিন্ন ডোমেনে অনুরোধ করতে বাধা দেয়। এই ক্ষেত্রে, Swiggy API অনুরোধটি প্রত্যাখ্যান করে কারণ এটি একটি ভিন্ন ডোমেন (আপনার প্রতিক্রিয়া অ্যাপ) থেকে এসেছে। এটি বিশেষত সমস্যাযুক্ত যখন আপনি API গুলি থেকে ডেটা আনছেন যা স্পষ্টভাবে ক্রস-অরিজিন অনুরোধগুলিকে সমর্থন করে না৷

একটি সাধারণ সমাধান হল "Allow CORS" Chrome এক্সটেনশনের মতো ব্রাউজার এক্সটেনশনগুলি ব্যবহার করা৷ যাইহোক, এই ধরনের এক্সটেনশন অসামঞ্জস্যপূর্ণ ফলাফল হতে পারে. এর কারণ তারা ব্রাউজার-স্তরের সেটিংস ম্যানিপুলেট করে যা সবসময় API অনুরোধের সাথে সঠিকভাবে সিঙ্ক্রোনাইজ করে না। এই প্লাগইনগুলি আদর্শভাবে শুধুমাত্র উন্নয়নের জন্য ব্যবহার করা উচিত এবং উৎপাদন পরিবেশে নয়। উত্পাদনের জন্য, একটি নিরাপদ এবং আরও নির্ভরযোগ্য পদ্ধতির জন্য একটি ব্যাকএন্ড প্রক্সি সার্ভার ব্যবহার করা হবে যা আপনার প্রতিক্রিয়া অ্যাপের পক্ষ থেকে ডেটার জন্য অনুরোধ করে, যেমনটি আগে দেওয়া সমাধানগুলিতে দেখা গেছে।

বিবেচনা করার আরেকটি দিক হল কার্যকরভাবে ত্রুটিগুলি পরিচালনা করা। যদিও CORS সমস্যাগুলি "আনয়নে ব্যর্থ" ত্রুটির একটি সাধারণ কারণ, অন্যান্য কারণ যেমন নেটওয়ার্ক অস্থিরতা, ভুল API URL, বা সার্ভার ডাউনটাইমও এই ত্রুটির কারণ হতে পারে৷ অতএব, এটি বাস্তবায়ন করা গুরুত্বপূর্ণ শক্তিশালী ত্রুটি পরিচালনা আপনার কোডে, বিশেষ করে যখন তৃতীয় পক্ষের API-এর সাথে কাজ করে। একটি সঠিক ত্রুটি-হ্যান্ডলিং পদ্ধতি সমস্যাটিকে আরও কার্যকরভাবে ডিবাগ করতে এবং কিছু ভুল হলে ব্যবহারকারী-বান্ধব বার্তা প্রদান করতে সহায়তা করবে।