ReactJS: Chrome CORS പ്ലഗിൻ ചേർത്തതിന് ശേഷം, കൈകാര്യം ചെയ്യാത്ത നിരസിക്കൽ (ടൈപ്പ് പിശക്) ലഭ്യമാക്കുന്നതിൽ പരാജയപ്പെട്ടു

പ്രതികരണത്തിൽ API പിശകുകൾ കൈകാര്യം ചെയ്യുന്നു: CORS പ്ലഗിൻ വെല്ലുവിളികൾ

എപിഐകളിൽ പ്രവർത്തിക്കുമ്പോൾ ReactJS, ഡെവലപ്പർമാർ പലപ്പോഴും ഡാറ്റാ കണ്ടെത്തലുമായി ബന്ധപ്പെട്ട വിവിധ വെല്ലുവിളികൾ നേരിടുന്നു, പ്രത്യേകിച്ച് മൂന്നാം-കക്ഷി API-കൾ കൈകാര്യം ചെയ്യുമ്പോൾ. ഉയർന്നുവരുന്ന ഒരു സാധാരണ പ്രശ്നം "കൈകാര്യം ചെയ്യാത്ത നിരസിക്കൽ (ടൈപ്പ് പിശക്): ലഭ്യമാക്കുന്നതിൽ പരാജയപ്പെട്ടു" എന്ന പിശകാണ്. പല ഡെവലപ്പർമാരും അവരുടെ വെബ് ആപ്ലിക്കേഷനുകൾ മെച്ചപ്പെടുത്താൻ ഉപയോഗിക്കുന്ന Swiggy's റെസ്റ്റോറൻ്റ് ലിസ്റ്റ് API പോലുള്ള ജനപ്രിയ API-കൾ ഉപയോഗിക്കുമ്പോൾ പോലും ഈ പിശക് സംഭവിക്കാം.

ഈ സാഹചര്യത്തിൽ, ഒരു CORS Chrome വിപുലീകരണം ചേർക്കുന്നത് നിയന്ത്രിത ബ്രൗസർ നയങ്ങൾ മറികടക്കുന്നതിനുള്ള ഒരു പ്രായോഗിക പരിഹാരമായി തോന്നിയേക്കാം. എന്നിരുന്നാലും, ഇത് പ്രശ്നം പരിഹരിക്കുന്നതിന് പകരം പുതിയ സങ്കീർണതകൾ അവതരിപ്പിച്ചേക്കാം. നിങ്ങളുടെ വികസന പരിതസ്ഥിതിയിൽ നിങ്ങൾ ഒരു CORS പ്ലഗിൻ ഉപയോഗിക്കുകയാണെങ്കിൽ, നിങ്ങളുടെ API അഭ്യർത്ഥനകൾ ലോഡുചെയ്‌ത ഉടൻ പരാജയപ്പെടുകയാണെങ്കിൽ, ബ്രൗസറിൻ്റെ അഭ്യർത്ഥന കൈകാര്യം ചെയ്യുന്ന സ്വഭാവവുമായി പ്ലഗിൻ വൈരുദ്ധ്യമുള്ള ഒരു പ്രശ്‌നത്തിൽ നിങ്ങൾ അകപ്പെട്ടേക്കാം.

ക്രോസ്-ഒറിജിൻ അഭ്യർത്ഥനകൾ എങ്ങനെ കൈകാര്യം ചെയ്യാമെന്നും ട്രബിൾഷൂട്ട് ചെയ്യാമെന്നും മനസ്സിലാക്കുന്നു CORS പിശകുകൾ സുഗമമായ ഒരു വികസന പ്രക്രിയയ്ക്ക് ReactJS അത്യന്താപേക്ഷിതമാണ്. അനധികൃത ക്ലയൻ്റുകളിൽ നിന്നുള്ള ആക്‌സസ് നിയന്ത്രിക്കുന്നതിന് സ്വിഗ്ഗി പോലുള്ള API-കൾക്ക് പലപ്പോഴും CORS പോലുള്ള സുരക്ഷാ പാളികൾ ഉണ്ട്. ഈ നിയന്ത്രണങ്ങൾ ശരിയായി പരിഹരിക്കേണ്ട പിശകുകളിലേക്ക് നയിച്ചേക്കാം.

ഈ ഗൈഡിൽ, എന്തുകൊണ്ടാണ് ഈ പിശക് സംഭവിക്കുന്നതെന്ന് ഞങ്ങൾ പര്യവേക്ഷണം ചെയ്യും, പ്രത്യേകിച്ച് Chrome-ൽ ഒരു CORS പ്ലഗിൻ ചേർത്തതിന് ശേഷം. നിങ്ങളുടെ Swiggy API-യിൽ പ്രവർത്തിക്കുമ്പോൾ അത് പരിഹരിക്കാനുള്ള തന്ത്രങ്ങളെക്കുറിച്ചും ഞങ്ങൾ ചർച്ച ചെയ്യും പ്രതികരിക്കുക അപേക്ഷകൾ.

Swiggy API-യുമായുള്ള പ്രതികരണത്തിൽ CORS പ്രശ്നങ്ങൾക്കുള്ള പരിഹാരങ്ങൾ വിശദീകരിക്കുന്നു

ആദ്യ പരിഹാരത്തിൽ, ഞങ്ങൾ ഒരു സൃഷ്ടിച്ചു Node.js Swiggy's API-യിൽ നിന്ന് റെസ്റ്റോറൻ്റ് ഡാറ്റ എടുക്കുമ്പോൾ CORS പ്രശ്നം മറികടക്കാൻ Express ഉപയോഗിച്ച് ബാക്കെൻഡ്. ആ ഡൊമെയ്ൻ അനുവദിക്കുന്നില്ലെങ്കിൽ മറ്റൊരു ഡൊമെയ്‌നിലേക്ക് അഭ്യർത്ഥനകൾ നടത്തുന്നതിൽ നിന്ന് CORS നയം ബ്രൗസറുകളെ തടയുന്നു. ഒരു ലളിതമായ സെർവർ സൃഷ്‌ടിക്കുന്നതിലൂടെ, ക്ലയൻ്റിനും API-യ്ക്കും ഇടയിലുള്ള ഒരു മധ്യ പാളിയായി നമുക്ക് പ്രവർത്തിക്കാനാകും, ഡാറ്റ സെർവർ-സൈഡ് ലഭ്യമാക്കുകയും അത് റിയാക്റ്റ് ഫ്രണ്ട്-എൻഡിലേക്ക് തിരികെ നൽകുകയും ചെയ്യുന്നു. ക്ലയൻ്റ് ആപ്പിൻ്റെ അതേ ഉത്ഭവത്തിൽ നിന്നാണ് അഭ്യർത്ഥന വരുന്നത് എന്നതിനാൽ ഈ രീതി CORS പിശകുകൾ ഒഴിവാക്കുന്നു.

എക്സ്പ്രസ് ബാക്കെൻഡ് ഇഷ്‌ടാനുസൃത തലക്കെട്ടുകൾ സജ്ജീകരിക്കുന്നു, പ്രത്യേകിച്ചും ആക്സസ്-കൺട്രോൾ-അനുവദിക്കുക-ഉത്ഭവം, ഇത് CORS നിയന്ത്രണങ്ങൾ നേരിടാതെ തന്നെ വിഭവങ്ങൾ അഭ്യർത്ഥിക്കാൻ ഞങ്ങളുടെ ക്ലയൻ്റിനെ അനുവദിക്കുന്നു. Swiggy-യുടെ API-ലേക്കുള്ള കോൾ കോൾ സെർവർ-സൈഡ് ആക്കി, ഡാറ്റ JSON ഫോർമാറ്റിൽ നൽകുന്നു. ഈ സമീപനം എപിഐ കീകളോ സെൻസിറ്റീവ് വിവരങ്ങളോ മറയ്ക്കുന്നതിനാൽ ഉൽപ്പാദന പരിതസ്ഥിതികളിൽ കൂടുതൽ സുരക്ഷിതവും പ്രവർത്തനക്ഷമതയുള്ളതുമായി കണക്കാക്കപ്പെടുന്നു. കൂടാതെ, ട്രൈ-ക്യാച്ചിൻ്റെ ഉപയോഗം ശരിയായ പിശക് കൈകാര്യം ചെയ്യൽ ഉറപ്പാക്കുന്നു, API പ്രതികരിക്കുന്നതിൽ പരാജയപ്പെട്ടാൽ ഉപയോക്തൃ-സൗഹൃദ പിശക് സന്ദേശങ്ങൾ പ്രദർശിപ്പിക്കുന്നു.

രണ്ടാമത്തെ സൊല്യൂഷനിൽ, ക്ലയൻ്റ് സൈഡ് റിയാക്റ്റ് കോഡിലെ ലഭ്യമാക്കാനുള്ള അഭ്യർത്ഥന ഞങ്ങൾ പരിഷ്‌ക്കരിക്കുന്നു. എപിഐയിൽ എത്തുന്നതിന് മുമ്പ് അഭ്യർത്ഥന ശരിയായി ഫോർമാറ്റ് ചെയ്തിട്ടുണ്ടെന്ന് ഉറപ്പാക്കിക്കൊണ്ട്, കോൾ കോൾ ഇഷ്‌ടാനുസൃത തലക്കെട്ടുകൾ ചേർക്കുന്നത് ഈ രീതിയിൽ ഉൾപ്പെടുന്നു. ഞങ്ങൾ Reacts ഉപയോഗിക്കുന്നു ഉപയോഗം പ്രഭാവം ഘടകം മൗണ്ട് ചെയ്യുമ്പോൾ API കോൾ പ്രവർത്തനക്ഷമമാക്കാൻ ഹുക്ക് ചെയ്യുക. async ഫംഗ്‌ഷൻ API പ്രതികരണത്തിനായി കാത്തിരിക്കുന്നു, അത് JSON-ലേക്ക് പരിവർത്തനം ചെയ്യുന്നു, അഭ്യർത്ഥന പരാജയപ്പെട്ടാൽ പിശകുകൾ കൈകാര്യം ചെയ്യുന്നു. എന്നിരുന്നാലും, ബ്രൗസറുകളിൽ നിന്നുള്ള ക്രോസ്-ഒറിജിൻ അഭ്യർത്ഥനകൾ API നേരിട്ട് അനുവദിക്കുന്നില്ലെങ്കിൽ ഈ പരിഹാരം ഇപ്പോഴും CORS പ്രശ്നങ്ങൾ നേരിടുന്നു.

അവസാനമായി, മൂന്നാമത്തെ പരിഹാരത്തിൽ, ഞങ്ങൾ 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 പ്രശ്നങ്ങൾ പരിഹരിക്കുന്നു

ഒരു റിയാക്റ്റ് ആപ്ലിക്കേഷനിൽ, പ്രത്യേകിച്ച് സ്വിഗ്ഗി പോലുള്ള മൂന്നാം കക്ഷി API-കൾ ഉപയോഗിക്കുമ്പോൾ, "എടുത്തെടുക്കുന്നതിൽ പരാജയപ്പെട്ടു" എന്ന പിശകിൻ്റെ അടിസ്ഥാന കാരണങ്ങളിലൊന്ന് CORS (ക്രോസ്-ഒറിജിൻ റിസോഴ്സ് പങ്കിടൽ) നിയന്ത്രണങ്ങൾ. CORS എന്നത് ഒരു സുരക്ഷാ ഫീച്ചറാണ്, അത് ഏത് ഡൊമെയ്‌നിൽ നിന്ന് വേറൊരു ഡൊമെയ്‌നിലേക്ക് അഭ്യർത്ഥനകൾ നടത്തുന്നതിൽ നിന്നും വെബ് ആപ്ലിക്കേഷനുകളെ പരിമിതപ്പെടുത്തുന്നു. ഈ സാഹചര്യത്തിൽ, Swiggy API അഭ്യർത്ഥന നിരസിക്കുന്നു, കാരണം ഇത് മറ്റൊരു ഡൊമെയ്‌നിൽ നിന്നാണ് (നിങ്ങളുടെ പ്രതികരണ ആപ്പ്). ക്രോസ്-ഒറിജിൻ അഭ്യർത്ഥനകളെ വ്യക്തമായി പിന്തുണയ്‌ക്കാത്ത API-കളിൽ നിന്ന് നിങ്ങൾ ഡാറ്റ നേടുമ്പോൾ ഇത് പ്രത്യേകിച്ചും പ്രശ്‌നകരമാണ്.

"CORS അനുവദിക്കുക" Chrome വിപുലീകരണം പോലെയുള്ള ബ്രൗസർ വിപുലീകരണങ്ങൾ ഉപയോഗിക്കുന്നത് ഒരു പൊതു പരിഹാരമാണ്. എന്നിരുന്നാലും, അത്തരം വിപുലീകരണങ്ങൾ അസ്ഥിരമായ ഫലങ്ങളിലേക്ക് നയിച്ചേക്കാം. API അഭ്യർത്ഥനകളുമായി എല്ലായ്പ്പോഴും ശരിയായി സമന്വയിപ്പിക്കാത്ത ബ്രൗസർ-ലെവൽ ക്രമീകരണങ്ങൾ അവർ കൈകാര്യം ചെയ്യുന്നതിനാലാണിത്. ഈ പ്ലഗിനുകൾ വികസനത്തിന് മാത്രമേ ഉപയോഗിക്കാവൂ, ഉൽപ്പാദന പരിതസ്ഥിതികളിൽ അല്ല. ഉൽപ്പാദനത്തിനായി, നേരത്തെ നൽകിയ പരിഹാരങ്ങളിൽ കാണുന്നത് പോലെ, നിങ്ങളുടെ റിയാക്റ്റ് ആപ്പിന് വേണ്ടി ഡാറ്റ അഭ്യർത്ഥിക്കുന്ന ഒരു ബാക്കെൻഡ് പ്രോക്സി സെർവർ ഉപയോഗിക്കുന്നതാണ് സുരക്ഷിതവും കൂടുതൽ വിശ്വസനീയവുമായ സമീപനം.

പരിഗണിക്കേണ്ട മറ്റൊരു വശം പിശകുകൾ ഫലപ്രദമായി കൈകാര്യം ചെയ്യുക എന്നതാണ്. CORS പ്രശ്നങ്ങൾ "എടുക്കുന്നതിൽ പരാജയപ്പെട്ടു" പിശകുകളുടെ ഒരു സാധാരണ കാരണമാണെങ്കിലും, നെറ്റ്‌വർക്ക് അസ്ഥിരത, തെറ്റായ API URL-കൾ അല്ലെങ്കിൽ സെർവർ പ്രവർത്തനരഹിതമായ സമയം എന്നിവയും ഈ പിശകിന് കാരണമായേക്കാം. അതിനാൽ, അത് നടപ്പിലാക്കേണ്ടത് പ്രധാനമാണ് ശക്തമായ പിശക് കൈകാര്യം ചെയ്യൽ നിങ്ങളുടെ കോഡിൽ, പ്രത്യേകിച്ച് മൂന്നാം കക്ഷി API-കളിൽ പ്രവർത്തിക്കുമ്പോൾ. ശരിയായ പിശക് കൈകാര്യം ചെയ്യൽ സംവിധാനം പ്രശ്നം കൂടുതൽ ഫലപ്രദമായി ഡീബഗ് ചെയ്യാനും എന്തെങ്കിലും തെറ്റ് സംഭവിക്കുമ്പോൾ ഉപയോക്തൃ സൗഹൃദ സന്ദേശങ്ങൾ നൽകാനും സഹായിക്കും.