[MAC] Node/React 기초 - Axios로 서버에 데이터 보내기

 

그동안은 Client가 없어서 Postman으로 보냈으나, 이제는 Client쪽도 구현이 됐기 때문에 AXIOS를 통해서 Request를 보내보자.

axios 라이브러리를 다운받자.

$npm install axios --save

 

 

 

 

 

간단하게 테스트해보자. LandingPage.js를 아래와 같이 수정하고 여기서 보낸 getRequest를 받기 위해 server쪽인 index.js에도 두번째 코드를 추가해주자.

 

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

 function LandingPage(){//Functional Component 만들기
     
    
    useEffect(() => {
        axios.get('api/hello')      //endpoint. getRequest를 server 즉 index.js로 보내질 것
        .then(response => console.log(response.data))   //server 에서 돌아온 response를 콘솔창에 출력해봄
    }, [])
    
    
    return(
         <div>
          LandingPage
         </div>
     )
 }

 export default LandingPage

 

 

 

app.get('api/hello', (req,res) => {
    res.send("안녕하세요~")
})

 

 

이제 서버를 켜보자. 이때 client 디렉토리가 아닌 그 상위 디렉토리인 boler-plate 디렉토리에서 아래의 명령어를 실행시켜야한다.  또한 이전에 디렉토리 구조를 변경했기 때문에 package.json 파일에서

"backend": "nodemon server/index.js" 로 수정해줘야 백엔드가 실행된다. 

$npm run backend

 

 

이제 프론트 서버도 켜보자. client 디렉토리로 이동 후 

$npm run start

 를 실행하자. 

 

 

결과

 

request가 잘 갔다 왔는지 확인을 위해 콘솔창을 켜보자. (fn + F12)

 

에러가 발생했다.

 

이유 : 사용자의 서버 포트는 5000번이고 클라이언트 포트는 3000번이기 때문
=> 클라이언트가 3000번으로 요청을 보냈으나 서버는 받지 못함 

 

그럼 5000번으로 요청을 보내보자.

useEffect(() => {
        axios.get('http://localhost;5000/api/hello')      //endpoint. getRequest를 server 즉 index.js로 보내질 것
        .then(response => console.log(response.data))   //server 에서 돌아온 response를 콘솔창에 출력해봄
    }, [])

 

 

CROS 에러

 

여전히 에러가 있다.

 

그 이유는 CORS 정책 때문이다. 만약 외부의 다른 클라이언트에서 요청을 보내면 보안상의 이슈가 있을 수 있기 때문에 CORS 정책이 있는것!
(CORS란? : Cross-Origin Resource Sharing의 약자로 서로 다른 Origin 사이에서 자원을 공유할 때 사용되는 정책)

 

 

 

다음 포스팅에서는 CORS 에러 해결방법에 대해 알아보자.