VUE中axios二次封装后出现跨域问题，直接使用则不会

Question

PHP的后台，已经配置好跨域
以登录为例
不封装的axios的用法：

this.axios({
    method: 'POST',
    url: 'http://api.xxx.com/member/login',
    data: {
      mobile: that.ruleForm.mobile,
      password: that.ruleForm.pass
    }
})

这样是不会出现跨域问题的。
但是axios经过封装后，就出现了跨域的问题。
以下是封装方法：
1、项目src目录下创建api文件夹
2、api文件夹下创建http.js文件，内容如下：

import axios from 'axios'
import qs from 'qs'

//定义接口的基础url
axios.defaults.baseURL = 'http://api.xxx.com';
//设置超时时间
axios.defaults.timeout = 10000;
//设置跨域是否允许携带凭证
axios.defaults.withCredentials = true;
//设置请求传递数据的格式
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
//设置post请求头
axios.defaults.transformRequest = data => qs.stringify(data);
//设置请求拦截器和响应拦截器等
export default  axios;

3、api文件夹下创建member.js，内容如下：

import axios from './http'
import router from '../router'

function login (data) {
  return axios.post('/member/login', data).then(function(res){
    if (res.data.status == 200) {
      //登录成功后的处理
    } else {
      this.$message.error(res.data.message);
    }
  });
}

export default {
  login
}

4、api文件夹创建index.js，作为数据请求的唯一入口，内容如下：

/*数据请求的唯一入口*/
import member from './member'

export default {
  member
}

5、main.js文件全局引入api

import api from './api/index'~~~~
Vue.prototype.$api = api

6、在login.vue中使用login

this.$api.member.login({
   mobile: that.ruleForm.mobile,
   password: that.ruleForm.pass
 })

然后就出现跨域问题了，不知道问题出在哪里，有没有懂的大神？

Answer 1

加了其他请求头之类的吧，然后触发了 options 嗅探请求了，然后这里的响应不对。

Answer 2

vue proxy 配置了吗

Answer 3

解决问题了吗？求大佬指点

Answer 4

我也遇到了同样的问题，很奇怪，请问有解决方案么