상세 컨텐츠

본문 제목

[ Axios ] Axios 사용하기 / url에 관한 짧은 정보 / where is root path of Axios(url) ? / 예시 / example

FrontEnd/Vue.js

by SangHoonE 2021. 11. 11. 15:23

본문

반응형

REST API를 적용하고,
Vue.js 혹은 React.js에서 Axios를 사용할 때에 초보자는 도대체 backend 를 담당하는 파일을 어디에다가 놓아야할지 모를 경우가 생깁니다.

네 그게 바로 접니다.

환경 및 사용 : Linux (Ubuntu) , Apache , vue - cli project , php , axios

 

예시)

        axios
          .get('http://urlExample:8080/phpFileName')
          .then(function(response) {
          console.log(response);
          })
          .catch(function(error) {
          console.log(error.response.data);
          })

get 방식으로 axios를 사용해보겠습니다.

 

apache 서버는 8080포트를 기본으로 사용하고 있습니다. 이를 통해 axios를 port 8080에서 값을 요청하고 받아옵니다.

그럴 때 php 파일의 위치는 

/var/www/html/ 에 작성해야합니다.

 

추가적으로 api 폴더를 생성하여 그곳에 넣는 방법도 있습니다. ㅎㅎ

 

 

만약 이렇게 했을 때 아래와 같은 에러가 발생하면 해당 포스트를 확인해주시길 바랍니다.

 

[ PHP, Vue.js ] 에러 해결 Access to XMLHttpRequest at blocked by CORS policy: No 'Access-Control-Allow-Origin' header is pr

Access to XMLHttpRequest at 'http://url/fileName' from origin 'http://url:port-number' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource...

code-hoon.tistory.com

 

감사합니다.

 

관련글 더보기

댓글 영역