[REACT]CORS 란 무엇인가?

리액트 Express를 두번째를 이해하기 위한 CORS를 알아보도록 하겠습니다.

 

- 리액트 영화앱을 만들기 위한 TMDB(The Movie API)에 API키를 사용해보겠습니다.

PostMan에서 데이터가 들어오는 것을 확인하고 react에서 axios를 이용해 데이터를 불러오겠습니다.

import React, { useState, useEffect } from 'react';
import './App.css';
import axios from 'axios';
import SingleMovie from './SingleMovie';
 
const REACT_TMDB_API_KEY = "xxxxxxxxxxxxxxxxxxxxxxxxxxx"

function App() {
  const [movies, setMovies] = useState([]);
  const [page, setPage] = useState(1);
  
  function getMovies(page) {
    axios({
      method: "GET",
      // eslint-disable-next-line no-undef
      url: `https://api.themoviedb.org/3/discover/movie?api_key=${REACT_TMDB_API_KEY}`
    }).then(response => {
      setMovies(response.data.results ?? [])
    })
  }

  useEffect(() => {
    getMovies(page);
  })

  return (
    <>
     <span className="movie__container">
       영화
     </span>
     <div className="movies">
                {movies.length > 0 && movies.map((movie, index) => (
                    <>
                    <SingleMovie key={movie.id} id={movie.id} media_type={'movie'}  movie={movie} {...movie} />
                    </>
                ))}
      </div>
  
     </>
  );
}

export default App;

기존 App.js 에 영화목록을 넣고 

 

import React from 'react'
 
import {img_300} from "./config";


const SingleMovie = ({movie,id,title,poster_path, media_type, first_air_date,release_date, original_title, name,original_name, backdrop_path, vote_average }) => {
    return (
        <div classNamee="handler">
            <div media_type={media_type} id={id}>
                <div className="poster__container">
                <img className={'poster'} src={poster_path ? `${img_300}/${poster_path}` : null}
                             alt={`${title ? title : (original_title ? original_title : (name ? name : original_name))}`}/>

                </div>
            </div>
        </div>
    )
}

export default SingleMovie

SingleMovie.js 에 영화 목록을 넣어주었다.

 

현재 CORS의 문제는 없는것같다.

평소 cors 오류는 이렇게 나다나는데 

 

Cors (Corss-origin Resource Sharing) Policy ?

- 교차 출처 리소스 공유라는 기능으로 실행중인 웹 애플리케이션이 서로 다른 출처의 리소스에 request할때 

 

보안상의 이유로 교차 출처 HTTP 요청을 제한하는 것이다.

 

교차 출처 리소스 공유 (CORS) - HTTP | MDN

예를들어 리액트 서버는 http://localhost:3000 노드 서버는 http://localhost:5000 으로 실행될 경우

 

브라우저는 각기 다른 서버(리액트, 노드) 에 요청을 하게 되는데 이때 CORS 정책의 이유로 ERROR가 발생한다.

 

해결법

- 현재 API를 요청하는 서버와의 문제인듯 하다. CORS 관련 문제를 해결하는 법은 몇가지 있다.

 

proxyy를 두어 처리해보자

 

프록시 ( Proxy )

 - 프록시(Proxy)는 "대신" 이라는 사전적의미를 가지고 프로토콜에서 대리응답에서 사용하는 개념이다.

 

프록시를 이용해서 중계를 하는 개념이다.

 

클라이언트의 브라우저는 직접 App 서버가 아닌 프록시 서버와 주고받게 된다.

 

- 브라우저가 각기 다른 서버에 요청하는 대신 브라우저는 리액트 서버만 요청하게 되고 리액트 서버가 앱서버에 요청을 하고 그 응답을

 

리액트서버에서 받아 다시 브라우저에 보내는 방식이다.

 

 

Proxy 설정 방법

- 설정방법에는 두가지가 있다.

      

          1) http-proxy-middleware

 

          2) package.json에 proxy 추가 (create-react-app으로 프로젝트를 진행할 경우)

 

                 http-proxy-midddleware에 대한 개념

 

준비중

 

- 위 두가지중 후자를 선택해서 만들어보겠다. 방법은 간단하다.

 

프로젝트 파일의 pacakge.json에 "proxy를 추가"

- package.json에 "proxy" : "앱서버 도메인" 을 추가하면 되고 이경우에 API 도메인을 넣어준다.

function App() {
  const [movies, setMovies] = useState([]);
  const [page, setPage] = useState(1);
  
  function getMovies(page) {
    axios({
      method: "GET",
      // eslint-disable-next-line no-undef
      url: `/3/discover/movie?api_key=${REACT_TMDB_API_KEY}`
    }).then(response => {
      setMovies(response.data.results ?? [])
      console.log(response);
    }).catch((error) =>{
      console.log(error);
    })
  }

이후 요청 url을 로컬에서 사용하듯이 proxy 주소를 제외한 뒤에 path와 query만 입력한다.

console.log를 확인해보면 정상적으로 데이터를 받아오고 있습니다.

 

 

 

GitHub - Koras02/React-Node-Express: React + Node-Express 연결하기

🤬 CORS? 그게 뭔데 !