[개발일지] 404 에러와의 사투

에러 메세지 :

Failed to load resource: the server responded with a status of 404 (Not Found)

 

 

문제상황 : 리액트 클라이언트에서 서버로 axios.post 요청을 했는데 계속 위와 같은 404 에러가 뜸

 

과정 :

 

요청할 때 404 에러 메세지에 서버 포트번호가 아닌 클라이언트 포트번호로 되어있었는데 확인을 안한 나의 mistake

해결 : 

이렇게 아래와 같이 컴포넌트에서  baseUrl을 적어주었더니 해결되었으며

const baseUrl = "http://localhost:3000";
    axios
      .post(baseUrl + "/posts", {

cra가 아닌 webpack 이용해서 생성한 리액트 프로젝트의 경우에는 webpack.config.js 파일에 

  devServer: {
  open: true,
  ...
  }

이런 부분이 있는데 devServer 안쪽에 proxy 설정을 해줄 수 있다! (자세한 코드는 적어놓지 않아서 죄송합니다.)

 

cra로 만든 프로젝트의 경우 package.json 파일에 "proxy" : "baseURL 주소" 적어주면 해결이 가능하다.

 

CORS 에러 또한 이러한 방식으로 해결가능하다.