ReactJS: Chrome CORS 플러그인을 추가한 후 처리되지 않은 거부(TypeError)를 가져오지 못했습니다.

React에서 API 오류 처리: CORS 플러그인 문제

API로 작업할 때 , 개발자는 특히 타사 API를 처리할 때 데이터 가져오기와 관련된 다양한 문제에 직면하는 경우가 많습니다. 발생하는 일반적인 문제 중 하나는 "처리되지 않은 거부(TypeError): 가져오지 못했습니다" 오류입니다. 이 오류는 많은 개발자가 웹 애플리케이션을 향상시키기 위해 사용하는 Swiggy의 레스토랑 목록 API와 같은 인기 있는 API를 사용하는 경우에도 발생할 수 있습니다.

이 경우 CORS Chrome 확장 프로그램을 추가하는 것이 제한적인 브라우저 정책을 우회하는 실행 가능한 솔루션처럼 보일 수 있습니다. 그러나 문제를 해결하는 대신 새로운 문제가 발생할 수 있습니다. 개발 환경에서 CORS 플러그인을 사용하고 API 요청이 로드 직후 실패하는 경우 플러그인이 브라우저의 요청 처리 동작과 충돌하는 문제가 발생할 수 있습니다.

교차 출처 요청 관리 및 문제 해결 방법 이해 ReactJS에서는 원활한 개발 프로세스를 위해 필수적입니다. Swiggy와 같은 API에는 승인되지 않은 클라이언트의 액세스를 제어하기 위해 CORS와 같은 보안 계층이 있는 경우가 많습니다. 이러한 제한으로 인해 올바르게 해결해야 하는 오류가 발생할 수 있습니다.

이 가이드에서는 특히 Chrome에 CORS 플러그인을 추가한 후 이 오류가 발생하는 이유를 살펴보겠습니다. 또한 Swiggy API를 사용하여 작업하는 동안 이를 해결하기 위한 전략에 대해서도 논의할 것입니다. 응용 프로그램.

명령	사용예
fetch()	이 명령은 Swiggy API에 HTTP 요청을 하는 데 사용됩니다. 리소스를 비동기식으로 가져오고 Response 개체로 확인되는 약속을 반환합니다. 이는 API에서 레스토랑 데이터를 검색하는 데 핵심입니다.
useEffect()	React에서 사용되는 이 후크를 사용하면 구성 요소를 렌더링한 후 API 호출과 같은 부작용을 실행할 수 있습니다. 구성 요소가 마운트되면 Swiggy의 API에 대한 가져오기 요청이 이루어지도록 보장합니다.
res.setHeader()	이 Express 명령은 다음과 같은 사용자 정의 HTTP 헤더를 설정합니다. 이는 CORS 처리에 매우 중요합니다. 백엔드가 모든 출처의 요청을 허용하여 CORS 오류를 방지할 수 있습니다.
res.json()	이 메서드는 JSON 응답을 클라이언트에 다시 보내는 데 사용됩니다. 프록시 서버 솔루션에서는 Swiggy에서 가져온 API 데이터가 프런트 엔드에서 쉽게 사용할 수 있는 JSON 형식으로 반환되도록 합니다.
await	이 키워드는 가져오기 작업이 해결될 때까지 비동기 함수 실행을 일시 중지하여 코드가 진행하기 전에 API 데이터를 기다리도록 하여 처리되지 않은 거부를 방지합니다.
express()	그만큼 함수는 Express 서버의 인스턴스를 만드는 데 사용됩니다. 이 서버는 데이터를 가져오는 동안 CORS 문제를 방지하기 위해 프런트엔드와 Swiggy API 사이의 프록시 역할을 합니다.
app.listen()	이 명령은 Express 서버가 지정된 포트(예: 이 경우 포트 5000)에서 들어오는 요청을 수신하기 시작하도록 합니다. 개발 중에 프록시 서버를 로컬로 호스팅하는 것이 중요합니다.
try...catch	이 블록은 네트워크 오류나 Swiggy API 문제 등 가져오기 요청 중에 발생할 수 있는 오류를 처리합니다. 이는 앱이 충돌하는 대신 오류를 정상적으로 처리하도록 보장합니다.

Swiggy API를 사용한 React의 CORS 문제에 대한 솔루션 설명

첫 번째 솔루션에서는 Swiggy의 API에서 레스토랑 데이터를 가져올 때 CORS 문제를 우회하기 위해 Express를 사용하는 백엔드. CORS 정책은 해당 도메인이 허용하지 않는 한 브라우저가 다른 도메인에 요청하는 것을 방지합니다. 간단한 서버를 생성함으로써 클라이언트와 API 사이의 중간 계층 역할을 할 수 있으며, 서버 측 데이터를 가져와서 React 프런트 엔드로 반환할 수 있습니다. 이 방법은 요청이 클라이언트 앱과 동일한 출처에서 발생하므로 CORS 오류를 방지합니다.

Express 백엔드는 사용자 정의 헤더, 특히 이를 통해 클라이언트는 CORS 제한 없이 리소스를 요청할 수 있습니다. Swiggy API에 대한 가져오기 호출은 서버 측에서 이루어지며 데이터는 JSON 형식으로 반환됩니다. 이 접근 방식은 API 키나 민감한 정보를 숨기기 때문에 프로덕션 환경에서 더 안전하고 성능이 뛰어난 것으로 간주되는 경우가 많습니다. 또한 try-catch를 사용하면 API가 응답하지 않는 경우 사용자에게 친숙한 오류 메시지를 표시하여 적절한 오류 처리가 보장됩니다.

두 번째 솔루션에서는 클라이언트 측 React 코드에서 가져오기 요청을 수정합니다. 이 방법에는 가져오기 호출에 사용자 정의 헤더를 추가하여 API에 도달하기 전에 요청의 형식이 올바른지 확인하는 작업이 포함됩니다. 우리는 React를 사용합니다 구성요소가 마운트될 때 API 호출을 트리거하는 후크입니다. 비동기 함수는 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 문제 해결

특히 Swiggy와 같은 타사 API를 사용할 때 React 애플리케이션에서 "가져오기 실패" 오류가 발생하는 근본적인 이유 중 하나는 다음과 같습니다. (교차 원본 리소스 공유) 제한 사항. CORS는 웹 애플리케이션이 서비스를 제공받은 도메인이 아닌 다른 도메인에 요청하는 것을 제한하는 보안 기능입니다. 이 경우 Swiggy API는 요청이 다른 도메인(React 앱)에서 발생하므로 요청을 거부합니다. 이는 교차 출처 요청을 명시적으로 지원하지 않는 API에서 데이터를 가져올 때 특히 문제가 됩니다.

일반적인 해결 방법은 "Allow CORS" Chrome 확장과 같은 브라우저 확장을 사용하는 것입니다. 그러나 이러한 확장은 일관성 없는 결과를 초래할 수 있습니다. 이는 API 요청과 항상 적절하게 동기화되지 않는 브라우저 수준 설정을 조작하기 때문입니다. 이러한 플러그인은 이상적으로는 프로덕션 환경이 아닌 개발용으로만 사용해야 합니다. 프로덕션의 경우 더 안전하고 안정적인 접근 방식은 앞서 제공된 솔루션에서 볼 수 있듯이 React 앱을 대신하여 데이터를 요청하는 백엔드 프록시 서버를 사용하는 것입니다.

고려해야 할 또 다른 측면은 오류를 효과적으로 처리하는 것입니다. CORS 문제는 "가져오기 실패" 오류의 일반적인 원인이지만 네트워크 불안정, 잘못된 API URL 또는 서버 가동 중지 시간과 같은 다른 요인으로 인해 이 오류가 발생할 수도 있습니다. 따라서 구현하는 것이 중요합니다. 특히 타사 API로 작업할 때 코드에 포함됩니다. 적절한 오류 처리 메커니즘은 문제를 보다 효과적으로 디버깅하는 데 도움이 되며 문제가 발생할 경우 사용자에게 친숙한 메시지를 제공합니다.

1. CORS란 무엇이며 왜 중요한가요?
2. CORS(Cross-Origin Resource Sharing)는 신뢰할 수 없는 도메인의 악의적인 요청을 방지하기 위해 브라우저에서 시행하는 보안 정책입니다. 이는 특정 도메인만 서버에서 리소스를 가져올 수 있도록 허용합니다.
3. "처리되지 않은 거부(TypeError): 가져오지 못했습니다"라는 메시지가 나타나는 이유는 무엇입니까?
4. 이 오류는 일반적으로 CORS 제한으로 인해 API 요청이 차단될 때 발생합니다. 잘못된 API URL이나 서버 문제로 인해 발생할 수도 있습니다.
5. 무엇을 하는가? 이 맥락에서 후크를 수행합니까?
6. 그만큼 React의 후크는 구성 요소가 마운트된 후 API 요청을 트리거하는 데 사용됩니다. 가져오기 작업이 적시에 발생하도록 보장하여 불필요한 여러 요청을 방지합니다.
7. React 애플리케이션에서 CORS 오류를 어떻게 수정할 수 있나요?
8. CORS 오류를 수정하려면 백엔드 프록시를 사용하고 다음과 같이 적절한 헤더를 설정할 수 있습니다. 서버에 있거나 개발 목적으로 CORS-Anywhere와 같은 서비스에 의존할 수 있습니다.
9. 프로덕션에서 CORS 브라우저 확장을 사용할 수 있나요?
10. 아니요, CORS 브라우저 확장은 개발용으로만 사용해야 합니다. 프로덕션에서는 서버에 CORS를 구성하거나 프록시 서버를 사용하는 것이 더 안전합니다.

CORS 오류는 타사 API를 사용하는 React 애플리케이션을 개발할 때 흔히 발생하는 문제입니다. 브라우저 확장이 개발에 도움이 될 수 있지만 보안과 데이터 무결성을 유지하려면 프로덕션 환경에서 프록시 서버와 같은 보다 안정적인 솔루션을 구현하는 것이 중요합니다.

오류 처리 및 백엔드 솔루션과 같은 올바른 기술을 사용하면 개발자는 "가져오기 실패"와 같은 문제를 효율적으로 처리할 수 있습니다. 이를 통해 애플리케이션이 API와 상호 작용할 때 원활한 사용자 경험을 제공하고 성능과 기능을 향상시킬 수 있습니다.