ReactJS: Chrome CORS Eklentisini Ekledikten Sonra İşlenmeyen Reddetme (TypeError) Getirilemedi

React'ta API Hatalarını Ele Alma: CORS Eklentisi Zorlukları

API'lerle çalışırken ReactJSgeliştiriciler, özellikle üçüncü taraf API'lerle çalışırken, veri getirmeyle ilgili çeşitli zorluklarla sıklıkla karşılaşırlar. Ortaya çıkan yaygın sorunlardan biri "İşlenmeyen Reddetme (TypeError): Getirilemedi" hatasıdır. Bu hata, birçok geliştiricinin web uygulamalarını geliştirmek için kullandığı Swiggy'nin restoran listesi API'si gibi popüler API'leri kullanırken bile ortaya çıkabilir.

Bu durumda, CORS Chrome uzantısı eklemek, kısıtlayıcı tarayıcı politikalarını aşmak için uygun bir çözüm gibi görünebilir. Ancak sorunu çözmek yerine yeni komplikasyonlara yol açabilir. Geliştirme ortamınızda bir CORS eklentisi kullanıyorsanız ve API istekleriniz yüklemeden kısa bir süre sonra başarısız oluyorsa eklentinin tarayıcının istek işleme davranışıyla çakıştığı bir sorunla karşı karşıya olabilirsiniz.

Kaynaklar arası isteklerin nasıl yönetileceğini ve sorun giderileceğini anlama CORS hataları ReactJS'de sorunsuz bir geliştirme süreci için gereklidir. Swiggy'ninki gibi API'ler genellikle yetkisiz istemcilerden erişimi kontrol etmek için CORS gibi güvenlik katmanlarına sahiptir. Bu kısıtlamalar, doğru şekilde ele alınması gereken hatalara yol açabilir.

Bu kılavuzda, özellikle Chrome'a ​​bir CORS eklentisi ekledikten sonra bu hatanın neden oluştuğunu inceleyeceğiz. Ayrıca, cihazınızda Swiggy API ile çalışırken bu sorunu çözmeye yönelik stratejileri de tartışacağız. Tepki ver uygulamalar.

Swiggy API ile React'ta CORS Sorunlarına yönelik Çözümlerin Açıklanması

İlk çözümde şunu oluşturduk: Node.js Restoran verilerini Swiggy API'sinden alırken CORS sorununu atlamak için Express'i kullanan arka uç. CORS politikası, tarayıcıların farklı bir alan adına istekte bulunmasını, söz konusu alan adı izin vermediği sürece engeller. Basit bir sunucu oluşturarak istemci ile API arasında orta katman görevi görebilir, sunucu tarafındaki verileri alıp React ön ucuna geri gönderebiliriz. Bu yöntem, istek istemci uygulamasıyla aynı kaynaktan geldiğinden CORS hatalarını önler.

Express arka ucu, özel başlıklar, özellikle de Erişim Kontrolü-İzin Ver-KökenBu, müşterimizin CORS kısıtlamalarıyla karşılaşmadan kaynakları talep etmesine olanak tanır. Swiggy'nin API'sine yapılan getirme çağrısı sunucu tarafında yapılır ve veriler JSON formatında döndürülür. Bu yaklaşım, API anahtarlarını veya hassas bilgileri gizlediğinden üretim ortamlarında genellikle daha güvenli ve performanslı kabul edilir. Ayrıca try-catch kullanımı, API'nin yanıt vermemesi durumunda kullanıcı dostu hata mesajları görüntüleyerek doğru hata yönetimini sağlar.

İkinci çözümde ise istemci tarafı React kodundaki fetch isteğini değiştiriyoruz. Bu yöntem, getirme çağrısına özel başlıklar eklemeyi ve isteğin API'ye ulaşmadan önce doğru şekilde biçimlendirilmesini sağlamayı içerir. React'ı kullanıyoruz kullanımEtkisi bileşen bağlandığında API çağrısını tetiklemek için hook. Eşzamansız işlev, API yanıtını bekler, onu JSON'a dönüştürür ve istek başarısız olursa hataları işler. Ancak API, tarayıcılardan gelen çapraz köken isteklerine doğrudan izin vermiyorsa bu çözüm hala CORS sorunlarıyla karşı karşıyadır.

Son olarak üçüncü çözümde CORS-Anywhere adında üçüncü taraf bir hizmet kullanıyoruz. Bu, API isteğini sunucuları üzerinden yeniden yönlendirerek CORS kısıtlamalarını geçici olarak atlamaya yardımcı olan bir ara yazılım hizmetidir. Bu çözüm geliştirme ortamlarında çalışabilse de güvenlik riskleri ve dış hizmetlere bağımlılık nedeniyle üretim için önerilmez. Ayrıca veri getirme sürecine ek bir katman eklediğinden performans yükünü de beraberinde getirir. Bu yöntemin kullanılması test aşamalarında uygun olabilir ancak güvenlik nedeniyle üretimde bundan kaçınılmalıdır.

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 İsteklerindeki CORS Sorunlarını Giderme

Bir React uygulamasında, özellikle Swiggy gibi üçüncü taraf API'leri kullanırken "Getirilemedi" hatasının altında yatan nedenlerden biri, CORS (Çapraz Kökenli Kaynak Paylaşımı) kısıtlamaları. CORS, web uygulamalarının, hizmet verildiği etki alanından farklı bir etki alanına istekte bulunmasını kısıtlayan bir güvenlik özelliğidir. Bu durumda Swiggy API, farklı bir alan adından (React uygulamanız) kaynaklandığı için isteği reddeder. Bu, özellikle çapraz köken isteklerini açıkça desteklemeyen API'lerden veri alırken sorun yaratır.

Yaygın bir geçici çözüm, "CORS'a İzin Ver" Chrome uzantısı gibi tarayıcı uzantılarını kullanmaktır. Ancak bu tür uzantılar tutarsız sonuçlara yol açabilir. Bunun nedeni, API istekleriyle her zaman düzgün şekilde senkronize edilmeyen tarayıcı düzeyindeki ayarları değiştirmeleridir. Bu eklentiler ideal olarak üretim ortamlarında değil, yalnızca geliştirme amacıyla kullanılmalıdır. Üretim için daha güvenli ve daha güvenilir bir yaklaşım, daha önce sunulan çözümlerde görüldüğü gibi, verileri React uygulamanız adına talep eden bir arka uç proxy sunucusu kullanmak olacaktır.

Göz önünde bulundurulması gereken bir diğer husus, hataları etkili bir şekilde ele almaktır. CORS sorunları "Getirilemedi" hatalarının yaygın bir nedeni olsa da ağ istikrarsızlığı, yanlış API URL'leri veya sunucunun kapalı kalma süresi gibi diğer faktörler de bu hataya neden olabilir. Bu nedenle uygulanması önemlidir sağlam hata yönetimi özellikle üçüncü taraf API'lerle çalışırken kodunuzda. Uygun bir hata işleme mekanizması, sorunun daha etkili bir şekilde ayıklanmasına yardımcı olacak ve bir şeyler ters gittiğinde kullanıcı dostu mesajlar sağlayacaktır.