개요

---

어느날 갑자기 발생해버린 react가 cors 에러를 발생시킨 것이 아니라 그냥 프론트 뷰 자체를 안띄워주는,….

해결하기 위해…. 무지성 검색 정보 탭들…(원래는 이것보다 3배는 많았음 다 지움…)

1.CORS의 정의

---

Cross Origin Resource Sharing의 약어로 웹 브라우저에서 다른 출처의 리소스 공유에 대한 허용/비허용을 다룬 보안 정책이다.

예를 들어, A회사의 API를 이용하고 싶을 때, A회사의 CORS 허용 설정이 되어 있어야 API에 접근해 리소스를 공유받을 수 있다.

2.리액트에서 CORS 설정하기

---

import { createProxyMiddleware } from 'http-proxy-middleware';

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

src/setupProxy.js 파일을 만들어주자.

import {useEffect, useState} from "react";
import './App.css';
import axios from 'axios';

function App() {
  const [hello, setHello] = useState('');

  useEffect(() => {
    axios.get('/api/hello')
    .then(response => setHello(response.data))
    .catch(error => console.log(error))
  }, []);

  return (
    <div className="App">
      백엔드 데이터: {hello}
    </div>
  );
}

export default App;

그리고 app.js 파일에서 백엔드에서 데이터를 가져올 수 있는지 확인하면 되겠다.

2.1. 프론트 서버 구동하기

---

이제 npm start를 통해 프론트엔드 서버를 열어보겠다.

아주 잘 동작된다. 이제 사이트에 접속해보자.

엥??? 어제까지만 해도 잘 되던 친구가 갑자기 로컬호스트에서 연결을 거부했다.

사이트가 잘 동작되고, 데이터가 잘 불러와지는 분들은 넘어가시면 됩니다.

postman 으로 get 요청을 보내서 데이터가 정상적으로 불러와지는지 테스트 했는데.. 되네????

뭐지… http-proxy-middleware의 고질적인 문제인가 싶었다..

조금 더 알아보자.

3. 리액트 CORS 안되는 문제점 찾기

---

문제	해결방법	결과
네트워크 문제	인터넷 연결 확인	정상
로컬 컴퓨터 문제	컴퓨터 재부팅	정상
브라우저 문제	크롬,엣지,파이어폭스 다 켜보기	정상
주소 문제	localhost가 아닌 127.0.0.1 주소 사용	정상
포트 충돌인지 확인	포트 변경해보기 3000 → 3001로	정상
frontend 프로젝트 문제인가?	create-react-app 다시하기	정상
setupProxy 설정 문제	setupProxy.js 파일 제거하고 서버 구동하기	해결??

결론은 Proxy 설정 과정중에서 문제가 발생했다는 것이다….

Proxy설정을 해도 localhost:3000 인 리액트 주소에서만 호출할려고 하는게 문제였다.

결국은 http-proxy-middleware를 사용하지 않고 axios로 localhost:8080/api/test 를 해야 데이터가 불러와지더라

그러면 리액트에서 CORS 설정을 하지말고 스프링부트(서버)에서 해버리면 되겠다!

4. 스프링부트에서 CORS 설정하기

---

에라 모르겠다. 리액트는 4시간 삽질해도 똑같더라.
결국은 이 방법밖에 없다.

1. setupProxy.js 파일 삭제하기

2. app.js 파일 코드중 axios 코드를 아래와 같이 수정하기

   axios.get('http://localhost:8080/api/test')
       .then(response => console.log(response.data))

3. springboot 에서 *Controllger.class파일에서 @CrossOrigin 어노테이션 붙이기

   @RestController
   public class ApiContoller {
   
       @GetMapping("/api/test")
       **@CrossOrigin(origins = "*")**
       public String helloTest() {
           return "This is a test API endpoint.";
       }
   }

4. 백엔드 서버 구동 후 프론트 서버 구동하기.

참고자료

---

리액트 서버 구동시 사이트 연결 불가 원인(해결X): [React] 사이트에 연결할 수 없음 ERR_CONNECTION_REFUSED

리액트 서버 구동시 사이트 연결 불가 원인 및 해결: [React] npm start 시 ERR_CONNECTION_REFUSED (사이트에 연결할 수 없음 localhost에서 연결을 거부했습니다.)

리액트로 proxy 설정하는 방법(공식문서): Proxying API Requests in Development | Create React App

리액트 proxy 설정하는 방법 및 404 오류의 원인: [React] React Proxy 설정 및 http-proxy-middleware 404 오류

스프링부트로 CORS 설정하는 방법: [SpringBoot] CORS 설정하기

스프링부트로 CORS 설정하는 방법2:[Spring Boot] CORS 를 해결하는 3가지 방법 (Filter, @CrossOrigin, WebMvcConfigurer)