Express공부(3) - Cors & axios

Cors 이슈

• 간략하게 cors이슈란 서로 다른 포트끼리 통신할때 발생하는 error이다.
• Cross-Origin Resource Sharing 으로 브라우저에서 어떤 리소스를 허용하고자 할때에 다른 포트에서온 정보에 대해서 어떤 보안적인 규칙을 지켜야 한다는 이슈가 발생한다.

이슈를 해결하고 브라우저에서 서버단으로 정보를 보내는 방법

1. 이슈를 확인하기 위해 클라이언트에서 서버로 데이터 전송해보기

2. 클라이언트에서 서버로 데이터를 전송할때 axios(악시오스) 라이브러리를 사용

3. npm install axios --save 명령어로 클라이언트(리액트) 에서 다운로드

4. 클라이언트 에서 axios 를 사용하여 서버에 POST 로 데이터 전송

useEffect(() => {
	axios
    .post('http://IP:port/AndPoint')
  	.then((res) => {
      	alert("요청성공")
    	console.log(res)
    })
  	.catch((err) => {
    	alert("요청실패")
      	console.log(err)
    })
})

와 같은 형식으로 데이터 받아오기
4-1.axios.post()에서 post() 안에 들어오는 건 어떤 URL로 get요청을 보낼지 post 요청을 보낼지 적는것
4-2. 현 코드에서는 post 요청을 보내고 있음

5. Test로 백server 에서 /api/test 로 post로 데이터를 보냄

6. 클라이언트 단에서 post요청을 작성했지만 서버단에서 post로 보내오는 요청을 구현하지 않았으므로 서버단에도 요청사항에 대해서 구현을 해준다.
   6-1.

// request = 요청 => 클라이언트에서 서버로 보내는 요청
// response = 응답 => 서버에서 클라이언트로 보내는 응답
app.post("/api/test", (request, response) => {
	console.log(request);
  	response.status(200).josn({ success: true})
})

7. 이후 클라이언트에서 요청을 보내게되면 실행이 실패하는 모습을 볼 수 있다.

• 그이유는 앞서 말헀던 cors이슈로 서로다른 포트끼리 요청과 응답을 하기 위해서는 보안규칙을 지켜주어야 하기 때문이다.
• 이를 해결하기위해서 클라이언트의 post URL에 localhost:5000과 같이 작성하여 요청을 하게 되면 err메세지만 다를뿐 요청에 대해서 실패하는것을 볼 수 있다.

8. 서로 다른 포트로 요청을 보내기 위해서는 Proxying 설정을 해주어야 한다.

9. Proxy 설정을 하기 위해서는 Proxying API Requests in Development 에서 예제 코드를 볼 수 있다.

• http proxy middleware 라는 라이브러리를 이용하여 설정

// Proxy 설정을 하는 예제 방법
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      // api 요청같은 경우에는 port번호를 5000으로 보내겠다는걸 알려주는 코드
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

10. 해당 예제 코드를 클라이언트 src 폴더에 setupProcy.js 파일을 생성하여 작성한다.

11. 라이브러리 사용을 위해서 클라이언트에 npm install http-proxy-middleware --save 로 라이브러리를 설치해 준다.

12. 클라이언트에서 다시한번 요청을 시도해보게되면 요청이 성공하는걸 알수 있다.

• 해당 부분은 브라우저의 console에서 확인할 수 있다.

13. 요청에 성공한 후 확실히 알아보기위해서 클라이언트의 요청 부분에 새롭게 코드를 추가해보면 서버에서 데이터를 받아오는지 알 수 있다.

• useState 를 사용하여 빈 스트링을 만들고 setList함수에 서버에 요청해서 받아온 데이터를 넣어서 출력이 되는지 확인

    const [list, setList] = useState("")

    useEffect(() => {
        axios
            .post("/api/test")
            .then((response) => {
                // 성공 핸들링 / get이 성공했을때
                setList(response.data.test)
            })
            .catch((error) => {
                // 에러 핸들링 / get이 실패했을때
                alert("요청실패")
                console.log(error)
            })
    }, [])

14. 클라이언트에서 post 메소드를 사용하여 요청을 보낼때 데이터를 보내는법
    14-1. body라는 클라이언트에서 보낼 데이터가 담길 변수를 선언해준다.

useEffect(() => {
  let body = {
    text: '안녕하세요 클라이언트입니다'
  }
        axios
            .post("/api/test")
            .then((response) => {
                // 성공 핸들링 / get이 성공했을때
                setList(response.data.test)
            })
            .catch((error) => {
                // 에러 핸들링 / get이 실패했을때
                alert("요청실패")
                console.log(error)
            })
    }, [])

14-2. 이후 post메소드의 두번째요소에 보낼 데이터를 작성해준다.

useEffect(() => {
  let body = {
    text: '안녕하세요 클라이언트입니다'
  }
        axios
            .post("/api/test", body)
            .then((response) => {
                // 성공 핸들링 / get이 성공했을때
                setList(response.data.test)
            })
            .catch((error) => {
                // 에러 핸들링 / get이 실패했을때
                alert("요청실패")
                console.log(error)
            })
    }, [])

14-3. 클라이언트에서 보내는 데이터를 확인하기 위해서 서버측 코드를 수정해준다.

app.post('/api/test', (request, response) => {
    console.log(request.body)
    response.status(200).json({ success: true, test: '안녕하세요' })
})

14-4. 위와 같이 request(요청)으로 받는 데이터를 확인하기 위해서 request.body로 들어온 정보를 출력해 확인할 수 있다.

• 클라이언트에서 body라는 변수이름으로 보냈기때문에 body로 확인
  14-5. 이후 서버측 터미널에서 출력된 부분을 확인해보면 undefined임을 확인할 수 있다.
  

• 이는 서버단에서 클라이언트에서 보내는 body에 대해서 읽을수 없기 때문에 일어나는 에러로 이를 해결하기 위해서 파싱이라는걸 해주어야 한다.

• 파싱을 하기위해 body.parsor라는 것을 사용해 주어야한다.

• body.parsor는 Express가 버전4 로 상승하면서 내장되어 따로 설치는 안해주어도 된다(아래 버전은 따로 설치를해서 사용해 주어야 한다.)

14-6. undefined를 해결하기위해서 파싱을 하기위해 서버측에서 body.parsor를 사용해야하는데 이를 위해서

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

코드를 작성해주어야 한다.

• 해당 코드를 작성하게 되면, 클라이언트에서 보내는 body에대한 명령어를
  추적할 수 있게된다.