ReactJS: Efter att ha lagt till Chrome CORS-plugin, gick det inte att hämta obehandlat avslag (TypeError)

Hantera API-fel i React: CORS Plugin-utmaningar

När du arbetar med API:er i ReactJS, stöter utvecklare ofta på olika utmaningar relaterade till datahämtning, särskilt när de hanterar tredje parts API:er. Ett vanligt problem som uppstår är felet "Obehandlat avslag (TypeError): Det gick inte att hämta". Det här felet kan uppstå även när du använder populära API:er som Swiggys restauranglista API, som många utvecklare använder för att förbättra sina webbapplikationer.

I det här fallet kan det verka som en hållbar lösning att lägga till ett CORS Chrome-tillägg för att kringgå restriktiva webbläsarpolicyer. Det kan dock leda till nya komplikationer istället för att lösa problemet. Om du använder ett CORS-plugin i din utvecklingsmiljö och dina API-förfrågningar misslyckas kort efter laddningen, kan du stöta på ett problem där plugin-programmet står i konflikt med webbläsarens beteende för att hantera förfrågningar.

Förstå hur man hanterar förfrågningar över flera ursprung och felsöker CORS-fel i ReactJS är avgörande för en smidig utvecklingsprocess. API:er som Swiggys har ofta säkerhetslager, som CORS, på plats för att kontrollera åtkomst från obehöriga klienter. Dessa begränsningar kan leda till fel som måste åtgärdas ordentligt.

I den här guiden kommer vi att utforska varför det här felet uppstår, särskilt efter att ha lagt till ett CORS-plugin i Chrome. Vi kommer också att diskutera strategier för att lösa det medan vi arbetar med Swiggy API i din Reagera applikationer.

Förklara lösningar för CORS-problem i React med Swiggy API

I den första lösningen skapade vi en Node.js backend som använder Express för att kringgå CORS-problemet när restaurangdata hämtas från Swiggys API. CORS-policyn förhindrar webbläsare från att göra förfrågningar till en annan domän om inte den domänen tillåter det. Genom att skapa en enkel server kan vi fungera som ett mellanlager mellan klienten och API:t, hämta dataserversidan och returnera den till React-gränssnittet. Denna metod undviker CORS-fel eftersom begäran kommer från samma ursprung som klientappen.

Express-backend ställer in anpassade rubriker, särskilt Access-Control-Allow-Origin, vilket gör att vår klient kan begära resurserna utan att möta CORS-restriktioner. Hämtningsanropet till Swiggys API görs på serversidan och data returneras i JSON-format. Detta tillvägagångssätt anses ofta vara säkrare och mer prestanda i produktionsmiljöer eftersom det döljer API-nycklar eller känslig information. Dessutom säkerställer användningen av try-catch korrekt felhantering, och visar användarvänliga felmeddelanden om API:et inte svarar.

I den andra lösningen ändrar vi hämtningsförfrågan på klientsidans React-kod. Denna metod innebär att man lägger till anpassade rubriker i hämtningsanropet, vilket säkerställer att begäran är korrekt formaterad innan den når API:et. Vi använder React's useEffect krok för att utlösa API-anropet när komponenten monteras. Asynkronfunktionen väntar på API-svaret, konverterar det till JSON och hanterar fel om begäran misslyckas. Den här lösningen har dock fortfarande CORS-problem om API:et inte tillåter förfrågningar från webbläsare direkt.

Slutligen, i den tredje lösningen använder vi en tredjepartstjänst som heter CORS-Anywhere. Detta är en mellanprogramtjänst som tillfälligt hjälper till att kringgå CORS-begränsningar genom att omdirigera API-begäran via deras server. Även om den här lösningen kan fungera i utvecklingsmiljöer, rekommenderas den inte för produktion på grund av säkerhetsrisker och beroende av externa tjänster. Det introducerar också prestandaoverhead eftersom det lägger till ett extra lager till datahämtningsprocessen. Att använda denna metod kan vara bekvämt under testfaser men bör undvikas i produktionen av säkerhetsskäl.

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;

Felsökning av CORS-problem i API-förfrågningar

En av de bakomliggande orsakerna till felet "Det gick inte att hämta" i en React-applikation, särskilt när man använder tredje parts API:er som Swiggy, är CORS (Cross-Origin Resource Sharing) restriktioner. CORS är en säkerhetsfunktion som begränsar webbapplikationer från att göra förfrågningar till en annan domän än den som de serverades från. I det här fallet avvisar Swiggy API begäran eftersom den kommer från en annan domän (din React-app). Detta är särskilt problematiskt när du hämtar data från API:er som inte uttryckligen stöder förfrågningar om korsning.

En vanlig lösning är att använda webbläsartillägg som Chrome-tillägget "Allow CORS". Sådana tillägg kan dock leda till inkonsekventa resultat. Detta beror på att de manipulerar inställningar på webbläsarnivå som inte alltid synkroniseras korrekt med API-förfrågningar. Dessa plugins bör helst endast användas för utveckling och inte i produktionsmiljöer. För produktion skulle ett säkrare och mer tillförlitligt tillvägagångssätt vara att använda en backend-proxyserver som begär data på uppdrag av din React-app, vilket framgår av de lösningar som tillhandahållits tidigare.

En annan aspekt att överväga är att hantera fel effektivt. Även om CORS-problem är en vanlig orsak till "Det gick inte att hämta"-fel, kan andra faktorer som nätverksinstabilitet, felaktiga API-webbadresser eller serveravbrott också resultera i detta fel. Därför är det viktigt att implementera robust felhantering i din kod, särskilt när du arbetar med tredje parts API:er. En korrekt felhanteringsmekanism hjälper till att felsöka problemet mer effektivt och ge användarvänliga meddelanden när något går fel.