[노드/리액트 기초] #21~22. 데이터 Flow & Axios, CORS 이슈 & Proxy 설정

**본 포스팅은 유튜브&인프런 John Ahn님의 노드 리액트 기초 강의를 참고하여 작성하였습니다.**

 

 

Data Flow

어떤 유저가 로그인을 하고 싶으면 client에서 사용자의 이름과 비밀번호를 넣고 로그인 버튼을 누른다.
그러면 그 요청이 server로 간다.
server에서는 DB에 유저 아이디가 있는지 찾고, 있으면 비밀번호가 그 유저 아이디의 비밀번호와 일치하는지 체크한다.
만약 일치한다면 성공했다는 response를 전송한다.
비밀번호가 틀렸거나 유저 자체가 DB에 없다면 그런 사항에 대해 response를 전송한다.

지금까지는 client(React)부분이 없어서 postman을 사용했었는데,
이제 client부분을 만들었으니 거기서 직접 요청을 보낼 수 있다.

요청을 보낼 때 AXIOS라는 걸 사용할건데 jQeury의 AJAX와 비슷한 거라고 생각하면 된다.
AXIOS는 node.js와 브라우저를 위한 HTTP통신 라이브러리이다.
(참고: https://velog.io/@kysung95/%EA%B0%9C%EB%B0%9C%EC%83%81%EC%8B%9D-Ajax%EC%99%80-Axios-%EA%B7%B8%EB%A6%AC%EA%B3%A0-fetch)

 

 

axios 를 사용한 request가 잘 동작하는지 확인해보자.

// LandingPage.js
import React, {useEffect} from 'react'
import axios from 'axios'

function LandingPage() {

  useEffect(() => {
    axios.get('/api/hello') //server로 request 보내기
    .then(response => console.log(response))
  }, [])

 

// index.js (server)
app.get('/api/hello', (req, res)=>{
  res.send("axios 테스트")
})

그 결과 다음과 같은 에러가 난다.

server의 port번호(7000)와 client의 port번호(3000)가 다르기 때문이다.

즉, client의 요청은 3000번 port로 가고 있는데 server는 7000번이라서 요청을 받지 못한다.

 

요청할 때 7000번 port로 해보자.

function LandingPage() {

  useEffect(() => {
    axios.get('http://localhost:7000/api/hello') //server로 request 보내기
    .then(response => console.log(response))
  }, [])

 

이번엔 이러한 에러가 난다.
그 이유와 해결책에 대해 알아보자.

 

---

 

CORS (Cross-Origin Resource Sharing)

cross : 왔다 갔다
origin : 서버 하나, 클라이언트 하나. 위에서처럼 3000번 port, 7000번 port로 origin이 다를 때
resource를 sharing할 때 적용되는 게 cors정책이다.

다른 웹사이트에서 어떤 서버에다가 뭘 보내다 보면 보안적 이슈가 생겨서 cors정책이 만들어졌다.

 

Proxy

cors정책에 대한 해결책 중 한 가지이다.

아래 링크의 'Configuring the Proxy Manually' 부분 참고
https://create-react-app.dev/docs/proxying-api-requests-in-development/

 

function LandingPage() {

  useEffect(() => {
    axios.get('/api/hello') //server로 request 보내기
    .then(response => console.log(response))
  }, [])

7000번으로 요청한다는 코드를 지워주고

// setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');

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

proxy 를 이용해주면

에러가 사라진 것을 볼 수 있다.

// index.js (server)
app.get('/api/hello', (req, res)=>{
  res.send("axios 테스트")
})

이렇게 요청한 대로 데이터가 전달되었다.