로컬 호스트, 서버 통신 문제 (CORS 이슈)

list component에서 sever쪽으로 데이터를 요청,응답을 위해서

axios를 사용하여 server쪽으로  테스트 요청을 보내봤습니다.

 

 

client쪽 코드

 

  useEffect(() => {

      //useEffect사용하여 렌더시 한번만 실행

      axios

        .post("/api/test")

        .then((res) => {

          // 성공 핸들링

          console.log("요청 성공");

        })

        .catch((err) => {

          // 에러 핸들링

          alert("요청 실패");

          console.log(error);

        })

        .finally(() => {

          // 항상 실행되는 영역

        });

    }, []);

 

 

 

server쪽 코드 

 

client쪽에서 요청(req)을 보내면 

요청 정보를 터미널에 띄우고

응답으로 res를 통해 상태200과 true를 보내주려 합니다.

 

  app.post("/api/test", (req, res) => {

    console.log(req);

    res.status(200).json({ success: true });

  }); 

 

 

 

 

에러 발생..

alert창

 

 

 

개발 도구창

 

 

404를 찾아보니 

404 Not Found 자원이 없음

클라이언트가 요청한 자원이  존재하지 않음. 경로(url), 자원(json, img 등)이 존재하지 않을때 404를 리턴한다. 즉, 없는걸 달라고 했을때 404 에러를 리턴한다. 대부분의 프레임워크에서 없는 URL경로로 요청했을 경우 404를 리턴해준다. 하지만 자원의 경우 서버에서 처리를 해주어야 하는데, 예를 들어 /api/user/:id 경로로 존재하지 않는 id를 넣어 요청했을때, 해당 id는 없는 값이므로 404를 리턴해야한다.

출처  https://potato-hyun.tistory.com/44

Server ) RESTful API, 자주 사용하는 Status code 정리 및 예시

 

 

경로는 같게 오타 없이 해줬는데.. 404정보를 읽어보니

로컬호스트 3000에서 server 호스트 5000번 쪽으로 요청을 보내는게

문제가 아닐까하여 정보를 검색해보다가 좋은 글을 발견!!

 

CORS이슈

참고 자료  https://www.datoybi.com/http-proxy-middleware/

[React] 클라이언트에서 CORS 해결하기(http-proxy-middleware)

 

http-proxy-middleware를 사용하면 cors 정책을 우회할 수 있다고 합니다.

또한 좋은점은 선택적으로 proxy를 이용할 수 있습니다.

 

 

 

예제코드

 

React App의 src/setupProxy.js 파일을 생성후 아래코드를 참고하여 다시 코딩..

 

/api로 오는 요청을 로컬5000번으로 보낸다는 의미.

app.use('/api',...5000)

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

module.exports = function(app) {
  app.use(
    '/api2', //proxy가 필요한 path prameter를 입력합니다.
    createProxyMiddleware({
      target: 'http://localhost:5000', //타겟이 되는 api url를 입력합니다.
      changeOrigin: true, //대상 서버 구성에 따라 호스트 헤더가 변경되도록 설정하는 부분입니다.
    })
  );
};

 

 

출처 : https://velog.io/@jmoon/react-proxy-%EC%84%A4%EC%A0%95

react proxy 설정

 

 

결과 요청 성공

 

 

  res.status(200).json({ success: true });

 

위 server단에서 보낸 상태200 success : true가 개발도구창에 나오는 것을 확인