CodeHoon

안녕하세요 상훈입니다.

✔ 에러 환경 / 내용

FrontEnd(Javascript, Vue.js) → BackEnd(Java)
비동기 통신 axios, post 방식으로 전송하였는데, 아래와 같은 에러가 발생하였습니다.

.w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported]

경고이긴하지만, 데이터가 안들어왔으니 결함이 되겠지요?

✔ 이유

- application/x-www-form-urlencoded
- charset=UTF-8

를 컨트롤러(Controller) - 어노테이션 @RequestBody 에서 인식하지 못하기 때문입니다.

✔ 결과

그래서 간단하게 RequestBody 어노테이션을 삭제해주었더니 정상적으로 데이터가 받아졌습니다.

이상입니다.

감사합니다.

안녕하세요 상훈입니다.

Vue3 + Spring 를 비동기 통신 axios 로 서버의 데이터 불러오기를 하려고합니다. 

2가지 이슈가 있었습니다.

1) Spring에서 사용하는 Post 방식.
2) Axios 통신에서 생기는 자체적인 문제

해당하는 부분에 적용해서 봐주시면 될 것 같습니다.

😱 1번째 이슈 😱 

- GET방식만 사용하다 보니, POST 방식을 똑같이 적용하는데에 오류가 발생하였다.

그래서 AXIOS를 사용하여 데이터를 백에서 받을 때 자체가 정상적으로 이루어지지 않았다.

@RestController
@RequestMapping("/rp")
public class RPController {
	@Autowired
	RPService rpService;
    
	@ResponseBody
	@PostMapping("/getItems")
	public List<SearchListOut> searchLists (@RequestBody SearchListIn searchListIn) {
		return rpService.searchLists(searchListIn.getRSeq());
	}
}

 - RestController 를 설정, ReqeustMapping을 통하여 "/rp"에 대한 모든 경로를 받을 것을 선언.

- Service를 연결.

- ResponseBody, PostMapping 을 통하여 post 통신방식으로 데이터를 받을 것을 선언.

- @RequestBody SearchListIn searchListIn 
   ㄴ searchListIn.java  DTO 에서 선언한 내용을 값으로 받겠다고 선언

- searchListIn.getRSeq() 를 통해 해당 값을 전달.

✔ SearchListIn  DTO

// SearchListIn DTO
import lombok.Data;

@Data
public class SearchListIn {
	private int rSeq;
}

이렇게 처리하여서 값을 받아왔습니다!

😱 2번째 이슈 😱 

알고보니 axios에서 2번째 파라미터로 값을 보내게 되는데, 이 부분에서 제대로 적용이 안된다는 이슈가 있었습니다.

그래서 3번째 파라미터로 전달하도록 처리했습니다.

function _fetchRP (url, payload) {
	return new Promise ((resolve, reject) => {
		axios.post(url, null, {params: {...payload} })
		...
	}
}

3번째 인자는 원래 config 옵션인데, 이상하게 그렇게 오류가 뜬다고 알려져 있더라구요.

후일 2번째 파라미터로 정상 동작하게 된다면 현재 옵션이 오류가 발생할 것으로 보입니다.

유념해주세요!

JavaScript 비통기 통신(Ajax, Axios 등)으로 PHP에서 송신한 json 데이터를 수신하여 콘솔에 찍어보는 작업을 하도록 하겠습니다.

1. 비동기 통신
2. PHP 송신
3. Javascript 수신 및 출력

■ 1. 비동기 통신

비동기 통신에는 여러 종류가 있지만 이 중에서 axios를 사용

Axios CDN 을 사용하였다. (편하게)

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
getData() // 함수 호출

function getData () { 
  axios.get("api주소")	
    .then(function(response) {
      console.log(response)
    })
    .catch(function(error) {
      console.log(error)
    })
}
</script>

get method로 api 주소를 호출한 모습이다.

성공시 "200" 성공과 함께 response가 출력된다. (지금 바로 하면 404에러가 뜰겁니다.)

■ 2. PHP 데이터 송신

그 다음으로 PHP에서 데이터를 출력하여 echo 해주면 된다.

<?php
// mysql connection 생략

$result = mysqli_query($con, $sql) or die('query error');

while($row = mysqli_fetch_assoc($result)){
    $data_array[] = ($row);
}

$result = json_encode($data_array);
echo $result;

- 짧은 설명 -

php와 database(DB) mysql 에서 데이터를 출력한 문구
(특별한 프레임워크를 사용하고 있지 않다.)

while문을 통해 출력한 데이터를 $data_array[] 배열에 반복문을 통하여 삽입,
json 형태 { key: value }  로 바꿔주어 출력.

[ mysql 를 조금 참고하자면, column명 : data 인 셈이다. ]
[ key : value ]

- 짧은 설명 끝 - 

■ 3. Javascript 수신 및 출력

아까 위에서 axios.get( ) 안의 내용입니다. then()의 코드

<script>
.then(function(response) {
      console.log(response)
      response = JSON.stringify(response.data)
      labelsAndDatas(response)
    })

결과값에 에러가 없다면,
해당 response를 JSON.stringify(response.data) 를 통해 문자열로 변환 중요★
labelsAndDatas( ) 함수로 데이터를 전송

<script>

function labelsAndDatas (result) {
  console.log(result)
}
</script>

labelsAndDatas 함수에서 response.data 를 result 로 받아와 콘솔창에 찍어준 모습

이제 이 함수 내에서 원하는 작업을 하면 된다. 

key: value로  보았을 때,  { '날짜' : '값', '총량' : '값'  } 을 확인할 수 있다.

Vue.js 에서 회원 로그인 정보를 php 로 axios를 통해 보내고 200 success response를 받았다.

하지만 그 내용을 오류로 넘기고 싶을 때 처리하는 방법

.then((response) => {
          if( response.data == false ) {
              throw new Error('no data from server');
          } else {
              console.log('success');
           }
        })

        .catch((error) => {
            console.log(error);
            this.errors.push("회원정보가 존재하지 않습니다.");
        });

then() 내에서 new Error로 넘겨주면,
아래 catch(error) 에서 해당 에러를 출력해준다.
그리고 this.errors.push 를 통해 error라는 id 를 가진 html 태그에 에러 내용을 출력해준다.

■ 신경쓸 점

1. throw new Error( )

throw를 통해 새로운 에러 객체를 생성하는 작업. 
이 작업을 통해 catch가 에러를 인식하고 해당 내용을 출력한다.

2. catch(error) => {   

Arrow function의 인스턴스 함수의 기능을 이용하여,
에러 함수 내에서 전역변수( this. )를 사용할 수 있게 한다.

Vue.js 3 에서 axios를 이용해 php 에 데이터를 송신하는 방법을 포스팅하도록 하겠습니다.

3일째 이거 만지다가 어쩌다 됐습니다. 억울..

[버전은 상관없지만] @vue/cli 4.5.15 에서 적용하였습니다. 

■ 1. Vue-cli project 설정 1/2

/src/views/Account/AxiosTest.vue

제가 form을 이용해 post data 를 송신할 Vue 페이지는 위와 같습니다.

AxiosTest.vue 
=> input 태그 2개로, id 와 password를 전달하려고 합니다.

1. Template

<template>
  <div>
    <form action="" @submit="checkForm">
      <input type="text" name="id" v-model="idValue" />
      <input type="password" name="password" v-model="passwordValue" />
      <button type="submit">submit</button>
    </form>
  </div>
</template>

2. script

<script>
import axios from "axios";

export default {
  data() {
    return {
      idValue: "",
      passwordValue: "",
    };
  },
  methods: {
    async checkForm(e) {
      e.preventDefault();
      let idValue = this.idValue;
      let passwordValue = this.passwordValue;

      await axios
        .post("/api/loginCheck", {
          id: idValue,
          password: passwordValue
        })
        .then(function (response) {
          // handle success
          console.log("success");

          console.log(response);
        })
        .catch(function (error) {
          // handle error
          console.log(error);
        })
        .then(function () {
          // always executed
        });
    },
  },
};
</script>

■ 1. Vue-cli project 설정 2/2

vue.config.js

프로젝트의 root 경로에 vue.config.js 파일을 없으신 분들은 생성해주시고 아래의 내용을 복붙해주세요.

vue.config.js

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8080/",
      },
    },
  },
};

■ 3. php 

Apache 서버를 사용하신다면, 8080포트로 구동 중이실겁니다. (본인의 포트에 맞게 설정해주세요)

/var/www/html/ 경로에 /api 폴더를 생성해주세요. 이곳에 axios의 data 를 수신할 php 파일을 생성할겁니다.

이렇게 생성하였습니다. (자유롭게 생성해주세요. 보통 /api 라고 많이 생성합니다.

/api/loginCheck.php

<?php
 // header의 요청을 수락하는 php 설정들. 안해주면 데이터를 못받는 경우가 생김
header('Access-Control-Allow-Origin:*');
header("Access-Control-Allow-Credentials", "true");
header('Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers');
header('Access-Control-Allow-Methods:GET,POST,PUT,DELETE,OPTIONS');

$data = json_decode(file_get_contents('php://input'), true);

// 반복문으로 데이터 출력 

■ 결과

감격스럽게도 200 통신 성공 결과가 출력되었고,

php에서 $data 는 array 의 타입이기 때문에 출력 결과(response) 가 array 로 출력되었습니다. 

■ 1차 수정

- 기존에 params 를 넘겨줘서 자꾸 데이터가 array로 출력이 되었습니다.

- 기존 : data(=params객체) : jsonStyleValues 
- 변경 : { jsonStyleValues list}

* POST method에서는 params 를 넘겨주면 안된다. 

참고

https://coderedirect.com/questions/43570/axios-get-from-local-php-just-returns-code-instead-of-executing

덕분에 3일동안 axios와 http, proxy, 등에 대해 많이 공부할 수 있었습니다.

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

네 그게 바로 접니다.

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

예시)

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

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

그럴 때 php 파일의 위치는 

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

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

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

감사합니다.

Linux, Ubuntu, Vue-cli, axios를 사용하는데, proxy 에러가 출력되었다.

Proxy error: Could not proxy request 

■ 해결 방법

해당 에러는 root 경로의 vue.config.js 에서 proxy 관련 정보를 수정하면 된다.

/vue.config.js

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "https://localhost:8081/",
      },
    },
}

기본 경로(/root)가 될 port 번호와 정보를 작성하면 된다.

proxy 문제가 해결된것을 확인하실 수 있습니다.

이렇게 axios를 이용해서 데이터를 올바른 경로에서 뽑아오면 되겠습니다.

Vue.js - axios를 설치하고 바로 사용하려고 하는데 에러가 발생하였습니다.

 'Axios' is not defined no-undef

당황하였다.

■해결 방법

해당되는 컴포넌트(component)에 import 해주시면 됩니다.

<script>
import axios from 'axios'

export default {
...
}
</script>

이상입니다.