axios/CORS/Proxy

client를 구현하기 전에는 postmen 이용하여 request 보냈는데 이제 client가 있기 때문에

axios를 이용하여 요청 보냄.

axios(엑시오스)는 jquery에서 ajax 같은것.

 

1. axios 설치

npm install axios --save

 

2. 테스트 라우터 생성

LandingPage.js

import React, { useEffect } from 'react'
import axios from 'axios'

function LandingPage() {

  useEffect(() => {
    axios.get('/api/hello')//서버측으로 주는 엔드포인트, 서버측 index.js에 get라우터 구현
    .then(response => console.log(response.data))
  }, [])

  return (
    <div>LandingPage</div>
  )
}

export default LandingPage

server/index.js

app.get('/api/hello', (req, res) => {
  res.send("hi~");
})

 

3. app start

backend와 frontend 포트 겹치지 않도록

backend 포트를 const port = 5000 로 수정함.

backend 실행

npm run backend

frontend 실행

*react에 기본포트가 3000이다.

변경하려면

package.json에서

"start": "react-scripts start",
//=>
"start": "set PORT=3001 && react-scripts start",

cd client

npm run start

 

4. CORS정책 해결 / Proxy 사용

axios.get('/api/hello')

서버의 포트번호가 3000으로 찾아짐

axios.get('http://localhost:5000/api/hello')

직접 포트번호를 다 쳤는데

CORS(Cross-Origin Resource Sharing) 정책 때문에 에러

 

 

4-1. http-proxy-middleware 설치

여러가지 방법 중 Proxy 사용!

npm install http-proxy-middleware --save

4-2.  src/setupProxy.js 생성

reactProject\boiler-plate\client\src\setupProxy.js

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

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

 

4-3. 실행 확인

 

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

Proxying API Requests in Development | Create React App

 

* Module not found 에러

처음 frontend를 실행할 때

Failed to compile.
Module not found: Error: Can't resolve 'zlib' in 'D:\reactProject\boiler-plate\client\node_modules\body-parser\lib'

에러가 나서

package-lock.json, node_module(폴더) 삭제후 (둘다 root랑 client에 각각1나씩 총 2개있음)

npm cache clean --force

root폴더와 client폴더에 모듈 다시 설치

 

이게 아니였고

LandingPage.js에 import {response} from 'express' 부분을 삭제 해주니깐 된다..