-
ReactJS / CORS 문제 해결을 위한 npm http-proxy-middleware 사용DEV/REACTJS 2021. 11. 16. 00:25728x90반응형
React로 개발을 진행하다보면 서버와 프론트를 구분할때가 언젠가 온다.
서버는 Nodejs를 통해 구축해놓은 상태이며
프론트로 이제 React를 사용한다.
보통의 경우인지는 모르겠지만,
local에서 개발을 진행할때 Nodejs의 경우에는 5000번의 포트를 자주 사용하는 듯 하고,
Reactjs의 경우에는 3000번의 포트를 사용하는 듯하다.
코딩을 한 후, 결과물을 보기 위해선 서로 다른 터미널에 각각의 서버를 가동시켜줘야하는데 여기서 CORS 문제가 발생한다.
(참고로 둘다 port의 값을 동일하게 지정해놓으면 문제가 없이 실행된다.)
우선 CORS란 Cross-Origin Resource Sharing 의 줄임말이고, 서로 기원이되는 리소스 공유 라고 해석해볼수 있다.
우선 이 내용은 어려우니 문제부터 해결해보자!
[CORS관련 내용 추가 필요]
내가 짠 코드가 아래와 같이 코딩이 되어있다고 생각을 해보자.
Front App.js import './App.css'; import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import LandingPage from './components/views/LandingPage/LandingPage'; import LoginPage from './components/views/LoginPage/LoginPage'; import RegisterPage from './components/views/RegisterPage/RegisterPage'; function App() { return ( <Router> <div> <nav> </nav> <Routes> <Route exact path="/" element={<LandingPage />} component={LandingPage} /> <Route exact path="/login" element={<LoginPage />} component={LoginPage} /> <Route exact path="/register" element={<RegisterPage />} component={RegisterPage} /> </Routes> </div> </Router> ); } export default App;
Front LandingPage.js import React,{useEffect} from 'react'; import axious from 'axios'; function LandingPage() { useEffect(() => { axious.get('/api/hello') .then(response => console.log(response.data)) }, []) return ( <div> LandingPage </div> ) } export default LandingPage
Backend index.js app.get('/api/hello',(req,res)=>{ res.send('hihi') })
코드의 내용을 해석하자면 다음과 같다.
1. Fornt App.js
루트 주소로 접근 시 Landing이라는 값을 가진 컴포넌트를 호출
2.Front LandingPagge.js
랜딩페이지에 들어왔는데, 이 랜딩 페이지는 들어오면 useEffect라는 함수가 실행되고,
그 함수를 실행한 후에 <div>Landing</div>
값을 반환(return)을 해준다.
useEffect라는 함수는
axious를 통해 서버(:3000)의 /api/hello를 접속하며
그 곳에서 얻은 response의 data값을 front의 콘솔에 찍어낸다.
3.Backend index.js
get방식으로 /api/hello 라는 주소에 요청(접속)을 하면
'hihi'를 response한다.
이렇게 개발한 후 프론트 서버와 백 엔드서버를 같이 켜준다.
그럼 해결
21.11.16
Use Effect에 대해 배웠기 때문에 이후 글 수정 필요 인식
반응형'DEV > REACTJS' 카테고리의 다른 글
React / Recoil 의 기초 개념과 기본 동작을 쉽게 설명해봤다( Atoms, Selector) (0) 2022.08.15 React / img src 이미지가 제대로 나오지 않을때 해결 방법 (0) 2022.08.14 ReactJS / calss와 function 의 비교, 그리고 Hello Hook (0) 2021.12.01 ReactJS / Attempted import error: 'Component' is not exported from './Component' ( improt 3줄 실수 정리 ) (0) 2021.11.17 ReactJS / useEffect(유즈 이펙트라 쓰고 버터 플라이 이펙트라 읽는다.) (0) 2021.11.16