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

해결 방법 1: 프록시 서버로 CORS 문제 처리

이 솔루션은 Node.js 백엔드 프록시 서버를 사용하여 CORS 오류를 방지하고 Swiggy API에서 데이터를 올바르게 가져옵니다.

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}`);
});

해결 방법 2: 사용자 정의 헤더 및 오류 처리와 함께 프런트 엔드 가져오기 사용

이 접근 방식은 React에서 직접 가져오기 요청을 수정하여 사용자 정의 헤더를 추가하고 오류를 효과적으로 처리합니다.

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;

솔루션 3: 개발을 위해 CORS-Anywhere 미들웨어 사용

이 방법은 개발 모드에 있는 동안 "CORS-Anywhere" 서비스를 사용하여 CORS 제한을 우회합니다. 이 솔루션은 프로덕션에 사용하면 안 됩니다.

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;

React의 CORS 및 API 요청에 대한 일반적인 질문

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

React에서 CORS 오류 관리에 대한 최종 생각

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

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