on
[ Vue.js ] Axios - post - php 데이터 송신방법 | REST API | 다른...
[ Vue.js ] Axios - post - php 데이터 송신방법 | REST API | 다른...
728x90
반응형
사용환경 : Linux, Ubuntu, Vue.js 3, vue-cli, axios - post, php Vue-cli port : 8081
PHP Apache server port : 8080
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
submit
2. 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;
const dataPost = {
id: idValue,
password: passwordValue,
};
await axios
.post("/api/loginCheck", {
// headers: {
// "Content-Type": "application/x-www-form-urlencoded",
// },
data: dataPost,
})
.then(function (response) {
// handle success
console.log("success");
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
// always executed
});
},
},
};
■ 1. Vue-cli project 설정 2/2
vue.config.js
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
// 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);
■ 결과
개발자 - 네트워크 data 콘솔 화면
감격스럽게도 200 통신 성공 결과가 출력되었고,
php에서 $data 는 array 의 타입이기 때문에 출력 결과(response) 가 array 로 출력되었습니다.
참고
728x90
반응형
from http://code-hoon.tistory.com/124 by ccl(A) rewrite - 2021-11-12 16:00:44