React에서 CORS 이슈 해결하기

[yunyoung1819]

상황

• 토이 프로젝트에서 admin 서버 개발 중 admin 클라이언트(localhost:3000)에서 admin 서버(localhost:8080)로 API 요청을 보낼 때 CORS가 발생함
• CRA(create-react-app) 클라이언트에서 프록시 설정을 통해 해결하는 방법을 기술

원인

• CORS (Cross Origin Resource Sharing)의 약자로 현재 애플리케이션의 도메인에서 다른 웹페이지 도메인으로 리소스가 요청되는 경우를 나타냄
• 예를 들어 'https://apis.data.go.kr/' 에서 'http://localhost:3000' 도메인으로 API 요청을 하게 되면 http 형태로 요청이 되므로 브라우저 자체에서 보안 상 이유로 CORS를 제한

해결

1. package.json에서 proxy를 설정하는 첫번째 방법

• package.json

{
    "proxy": "https://apis.data.go.kr/"
}

이렇게 설정을 해주게 되면 API 서버와 동일한 도메인이 됨으로서 CORS 정책 해결 및 Access-Control-Allow-Origin의 허용을 받을 수 있음

2. http-proxy-middleware를 통한 두번째 방법

• npm install

npm install http-proxy-middleware --save

• ser/setupProxy.js 파일 생성

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(
        '/api',
        createProxyMiddleware({
            target: 'http://localhost:8080',
            changeOrigin: true,
        })
    );
};

• Rest API 호출 부분

import React, { useEffect } from 'react';
import axios from 'axios';

function LandingPage() {
    useEffect(() => {
        axios.get('api/hello')
        .then(response => console.log(response.data))
    }, [])
    return (
          <div>
             LandingPage
          </div>
    )
}

export default LandingPage;

참고

• https://create-react-app.dev/docs/proxying-api-requests-in-development/
• https://12716.tistory.com/entry/ReactJS-CORS%EC%9D%B4%EC%8A%88-%ED%95%B4%EA%B2%B0%EC%9D%84-%EC%9C%84%ED%95%9C-Proxy-%EC%84%A4%EC%A0%95