ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • ReactJS / CORS 문제 해결을 위한 npm http-proxy-middleware 사용
    DEV/REACTJS 2021. 11. 16. 00:25
    728x90
    반응형

    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에 대해 배웠기 때문에 이후 글 수정 필요 인식

    반응형

    댓글

Designed by Tistory.