3. MERN기반 커뮤니티 - axios와 CORS정책

클라이언트는 3000번포트로 열려있고,

서버는 5000번 포트로 연결되어있다고 가정하자.

 

이렇게 서로다른 포트들끼리 통신을 하면 CORS이슈가 나온다.

다른 포트에서 온 데이터에 대해서 어떤 보안적인 규칙을 지켜야한다라는 뜻이다.

 

 

먼저 CORS이슈가 나오는지 확인해보기 위해 클라이언트에서 axios로 데이터를 보내보자

 

1. axios 설치

npm i axios --save

2. axios 사이트에서 사용법 보기

https://axios-http.com/kr/docs/example

기본 예제 | Axios Docs

const axios = require('axios');

// 지정된 ID를 가진 유저에 대한 요청
axios.get('/user?ID=12345')
  .then(function (response) {
    // 성공 핸들링
    console.log(response);
  })
  .catch(function (error) {
    // 에러 핸들링
    console.log(error);
  })
  .finally(function () {
    // 항상 실행되는 영역
  });

위 코드를 이용해서 클라이언트의 useEffect에서 사용한다.

 

client/List.js

import axios from 'axios'

axios.get('/api/test')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })

  }, [])

server/index.js

app.post("api/test",(req,res)=>{
    console.log(req);
    res.status(200).json({success:true});
})

3. 클라이언트에서 (localhost:3000) List 컴포넌트에 들어가면 404에러가 뜨게된다.

• 첫번째 문제는 포트가 달랐을 떄 나오는 CORS이슈이다.
• 두번째 문제는 post요청이 동일한 포트인 3000번 포트에 보내고 있는 것이다.(서버는 5000번포트)

 

두 문제의 해결방법은 먼저  proxy를 사용하는 것이다.

https://create-react-app.dev/docs/proxying-api-requests-in-development

Proxying API Requests in Development | Create React App

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

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

npm install http-proxy-middleware --save

proxy를 설치하고,

위 코드를 복사해서 client/src폴더에 새로운 파일 setupProxy.js를 생성해 붙여넣는다.

그러면 아래처럼 local:3000/List에서 데이터를 잘 받아오게 된다.

지금 현재 local:3000 클라이언트 주소에서 local:5000번에 axios요청을하고, local:3000클라이언트에서 응답을 확인하고 있는 것이다.

서버측에서도 클라이언트를 열 수 있지만 그렇게 하려면 클라이언트에서 build를 실행 후 localhsot:5000에서 요청응답을 확인해야하므로 번거롭다. 

 

이제 데이터를 서버에서 클라이언트에 아래와 같이 보내면 잘 받아와진다.

 

그리고 두 번째로 클라이언트에서 데이터를 보내 서버에서 받는 과정을 예제로 보자.

클라이언트에서 위와 같이 body를 추가해 post요청을 하면 서버에 데이터를 보낸다.

하지만 서버에서는 데이터를 잘 받아오지 못하고 undefined가 뜨게 된다.

-> body-parser를 해줘야한다. -> express에 내장되어있다.

server/index.js에 아래의 코드를 추가해준다.

app.use(express.json());
app.use(express.urlencoded({ extended:true }));

그러면 아래와 같이 서버에서 데이터를 잘 받아오게 된다.

 

Proxy사용이유

https://fomaios.tistory.com/entry/Network-%ED%94%84%EB%A1%9D%EC%8B%9C-%EC%84%9C%EB%B2%84%EB%9E%80-feat-%ED%95%84%EC%9A%94%ED%95%9C-%EC%9D%B4%EC%9C%A0-What-is-a-Proxy-server