Vue踩坑之axios

基本

使用vue cli ui，依赖vue-axios，axios。

引入：

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios，axios)

6 Vue.use(VueAxios).use(axios)   //这样写报错，不知道为啥，说让装axios

使用：

Vue.axios.get(api).then((response) => {
  console.log(response.data)
})
//或
this.axios.get(api).then((response) => {
  console.log(response.data)
})
//或
this.$http.get(api).then((response) => {
  console.log(response.data)
})

 当然一般项目里我是这样写：

this.axios({
  method: "post",
  url: "http://127.0.0.1:8081/login_users.php",
  headers: {
    "Content-Type": "application/json"
  },
  data: {
    "loginEvidence": this.username,
    "loginPwdMd5": getMd5(this.password)
  }
}).then(function(response) {
  console.log(response);
})

 

跨域

上面的代码其实已经包含axios中跨域设置的部分，即配置请求头

headers: {
  "Content-Type": "application/json"
}

但若跨域请求，服务器也同样要进行设置

Apache

找到 httpd.conf 文件

1，将下面一行取消注释（去掉#）

 #LoadModule headers_module modules/mod_headers.so   //取消注释

2，然后修改这个部分

<Directory "D:/wamp/www/"> //我的路径 
    AllowOverride All
    Require all granted
</Directory>

在标签对内添加一行

#对所有域名开放       
Header set Access-Control-Allow-Origin *  

或者添加下面一行也可以

#对指定域名开放
Header set Access-Control-Allow-Origin http://www.***.com 

 Nginx

　　还没用到...后续补充...

数据格式

之前用jq直接$.post()的时候，传递数据的格式都是form-data，所以PHP后台可以用$_POST[]接收；

但axios 默认使用 payload(json)格式提交数据，$_POST[]是接收不到的！

只有x-www-form-data 和 multipart/form-data 这两种形式的payload才会填充$_POST, 而application/json则填充 php://input。

 

有两个解决方法：

1，修改 axios 提交数据格式，使用 qs 转换数据。

2，修改PHP接收数据方式，用file_get_contents('php://input');接收。

$postData = file_get_contents('php://input');
$request = !empty($postData) ? json_decode($postData, true) : array();

 

参考：

https://blog.csdn.net/cominglately/article/details/80393335

https://blog.csdn.net/cnwyt/article/details/84883295