解决跨域以及局部或全局配置axios

解决跨域

第一步：在vue.config.js中配置如下内容

devServer: {

    proxy: {

      '/api': {

        target: 'http://localhost:3000/'

      }

    }

  }

配置完之后一定要重新启动项目：npm run serve

第二步，请求接口里写代理服务器地址

created(){

    axios.get('/api')

    .then(res=>{

      console.log(res)

    })

  }

服务端文件server.js代码如下：

http.createServer((req,res)=>{

    /* 这句话是允许跨域用的 */

    // res.setHeader('Access-Control-Allow-Origin','*')

    /* 下面是后端返回的结果 */

    res.end('taotao:man not too fast')

    /* 3000是端口 */

}).listen(3000,function(){

    console.log('server start...')

})

在当前目录下启动服务使用命令：node server.js  不需要终止服务，继续运行npm run serve

终止服务：ctrl+c

重启就是先ctrl+c 再node server.js

执行多个并发请求

 data(){

    return {

      url1:'https://cnodejs.org/api/v1/topics',

      url2:'https://cnodejs.org/api/v1/topic/5ae140407b0e8dc508cca7cc'

    }

  },

  created(){

    Promise.all([axios.get(this.url1) , axios.get(this.url2)])

    .then(res=>{

      /* 两个请求都执行完毕了再返回结果 */

      console.log(res)

    })

    // axios.all([ axios.get(this.url1) , axios.get(this.url2) ])

    // .then( axios.spread( (res1,res2)=>{

    //   /* 两个请求都执行完毕了再返回结果 */

    //   console.log(res1)

    //   console.log(res2)

    // }) )

  }

}

两者的区别，一个返回的是数组形式，一个返回的是两个参数

axios局部配置

    /* 自定义配置新建了一个axios实例 */

    /* 使用这个instance实例都不用把url写全了，直接写路径（例如login） */

    this.instance=axios.create({

      baseURL:'http://timemeetyou.com:8889/api/private/v1/',

      /* 请求花费超过了timeout的事件 请求就被打断 */

      timeout:6000,

      /* 给使用instance这个实例的接口都配置上headers */

      headers:{

          'Authorization':localStorage.token

        }

    })

  },

  methods:{

    login(){

      this.instance.post('login',{

        username:'admin',

        password:'123456'

      })

      .then(res=>{

        console.log(res.data);

        localStorage.token=res.data.data.token

      })

    },

axios全局配置

 created(){

axios全局配置基本路径和请求头

    axios.defaults.baseURL='http://timemeetyou.com:8889/api/private/v1/';

    axios.defaults.headers.common['Authorization']=localStorage.token;

    axios.defaults.timeout=3000;

全局配置 添加请求拦截器

  每次发送都会进行拦截

    axios.interceptors.request.use(function(config){

      /* 再发送请求之前做些什么 */

      console.log('config',config);

可以统一的给返回数据 再加属性和值

      /* 在请求拦截的时候 添加请求头也是可以的 */

      /* config.headers.Authorization=localStorage.token */

必须把config return出去

      return config

    },function(err){

      /* 对请求错误做什么 */

      return Promise.reject(err);

    })

添加响应拦截器

**!!只要请求有响应 都会先走一遍响应拦截器 

    axios.interceptors.response.use(function (response) {

      // 对响应数据做点什么

      console.log('response',response)

      /* 可以统一的给返回数据 再加属性和值 */

      response.data.msg = '我是response我最大'

response也是必须要return出去的

      /* 可以在响应拦截里面直接把数据data返回出去 */

      return response.data;

    }, function (error) {

      // 对响应错误做点什么

      return Promise.reject(error);

    });

  },

  methods:{

    login(){

      axios.post('login',{

        username:'admin',

        password:'123456'

      })

      .then(res=>{

        console.log(res);

原本的token应该在res.data.data.token里，因为相应拦截器返回了res.data所以这少写一个

        localStorage.token=res.data.token

      })

    },