vue-axios 基本用法及跨域问题

首先安装axios

cnpm install axios
cnpm install --save axios vue-axios

安装完后，可以封装一个axios.js文件，在axios.js里引用：

import axios from 'axios'

在所需要的组件内调用axios.js文件

import { get,post } from '../axios/axios.js'

接下来就是从后台调数据了（封装后的调用）

get('http://www.baidu.com/pages', { 
    data:'' //向后台发送的数据请求
}).then(res => {
    this.data = res //将后台发送过来的数据res 赋值给data
}).catch(res => {
    console.log("链接服务器失败") //链接服务器失败后的回调
});

-------------------------------------------------------------------（分界线）
接下来就是axios的跨域问题了
打开配置文件config里的index.js
找到dev:{}
替换代码为：

  dev: {
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {//只在开发环境中有效
        '/api': {
        target: 'http://www.baidu.com/',//设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''//这里理解成用'/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替
        }
    }
    }

当然这种写法只在开发环境有效，为了解决线上跨域，就要再做点其他事情了：通过判断开发环境与生产环境来给axios内的url做更改。
首先在配置文件config内新建axios.config.js，内容如下：

var env = process.env.NODE_ENV === 'production'
module.exports = {
    baseURL:env ? 'http://baidu.com' : '/api'
}

然后就是在封装好的axios文件中调用，并且修改axios的公用url地址：

import AxiosConfig from '../../config/axios.config.js'
axios.defaults.baseURL = AxiosConfig.baseURL

在axios.js内设置请求头：

axios.defaults.headers.get['Content-Type'] = 'application/json'
axios.defaults.headers.post['Content-Type'] = 'application/json'
axios.defaults.headers.post['Access-Control-Allow-Credentials'] = true
axios.defaults.headers.put['Content-Type'] = 'application/json'
axios.defaults.headers.delete['Content-Type'] = 'application/json'
axios.defaults.withCredentials = false

到此前端工作完成，接下来就是后台方面的工作。
php设置header：

header('Access-Control-Allow-Origin:*');// * 为所有网站都可访问，报错不可设置*时，vue端  withCredentials: true 改成 withCredentials: false
header('Access-Control-Allow-Credentials:true'); // 对浏览器发送的凭证信息（发送凭证信息，需要设置 XMLHttpRequest 的 withCredentials 属性为 true）做出响应
header('Access-Control-Allow-Methods:GET, POST, PUT,OPTIONS'); // 设置请求类型
header('Access-Control-Allow-Headers:x-requested-with,content-type,access-control-allow-credentials'); //向服务器询问是否支持跨域的自定义header字段，服务器需要适当的应答
header('Content-Type:application/json');
if ($_SERVER['REQUEST_METHOD'] == "OPTIONS"){
    exit();
}

axios的跨域大功告成，这只是最常用的一种跨域方法，也有很多其他的方法，欢迎各位大佬留言。