axios实现跨域及突破host和referer的限制；axios 拦截器的使用

webpack中设置代理

  proxyTable: {
      //跨域代理
      'api':{
        target:'https://c.y.qq.com', // 需要代理的地址
         secure: false, // 如果是https接口，需要配置这个参数,
         changeOrigin: true, // 是否跨域
         pathRewrite:{
            '^/api': ''
         }
      },
      '/pc': { // 代理url关键字
        target: 'https://u.y.qq.com', // 需要代理的地址
        secure: false, // 如果是https接口，需要配置这个参数
        changeOrigin: true, // 是否跨域
        pathRewrite: {
          '^/pc': ''
        },
        // 突破host和origin的限制
        headers: {
          referer: 'https://y.qq.com/',
          origin: 'https://y.qq.com'
        }
      }
    },

封装axios请求方法

import axios from 'axios';
//请求公用数据
 const commonParams = {
  g_tk: 5381,
  notice: 0,
  format: 'jsonp',
  inCharset: 'utf-8',
  outCharset: 'utf-8',
}


//获取歌曲列表
export function songList(){
  const url = '/pc/cgi-bin/musicu.fcg'
   const data = Object.assign({}, commonParams, {
    loginUin: 0,
    hostUin: 0,
    platform: 'yqq.json',
    needNewCode: 0,
    data: JSON.stringify({
      'comm': { 'ct': 24 },
      'playlist': {
        'method': 'get_playlist_by_category',
        'param': {
          'id': 3317,
          'curPage': 1,
          'size': 40,
          'order': 5,
          'titleid': 3317
        },
        'module': 'playlist.PlayListPlazaServer'
      }
    }),
    ...commonParams
  })
  return axios({
    method: 'get',
    url: url,
    params: data
  })
}

在组件中使用

import { getRecommend,songList} from "@/api/recommend.js";
export default {
  name: "Recommend",
  created() {
    songList()
      .then((res) => {
        console.log(res,2222);
      })
      .catch((err) => {
        console.log(err,33333);
      });
  },
};

 

 

axios 拦截器的使用

<template>
  <div class="hello">
    <h1>axios 拦截器的使用</h1>
    <button @click="sendAxios">发送axios</button>
    <h2 v-if='isLoadding'>isLoadding</h2>
    <h2 v-else>{{msg}}</h2>

    {{isLoadding}}
  </div>
</template>

<script>
  import axios from 'axios';
  export default {
    name: 'HelloWorld',
    data() {
      return {
        msg: '',
        isLoadding:false
      }
    },
    created() {
      const me=this;
      console.log('created')
      // 配置拦截器
      axios.interceptors.request.use(function (config) {
        me.isLoadding = true;
        return config
      }, function (error) {
        console.log('请求拦截器错误', error)
        return Promise.reject(error)
      })

      //axios 响应拦截器
      axios.interceptors.response.use(function (response) {
        me.isLoadding = false;
        me.msg="请求成功";
        return response
      }, function (error) {
        console.log('响应拦截器错误', error)
        return Promise.reject(error)
      })
    },
    mounted() {
      console.log('mounted');
    },
    methods:{
      sendAxios(){
        axios.post('http://localhost:3000/api/login')
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

 

 

import axios from 'axios';
let msg=''
//响应拦截器
axios.interceptors.response.use(function(response){
  msg='success';
  return response;
},function(error){
  msg='响应拦截器错误'
  return;
})

//请求拦截器
axios.interceptors.request.use(function (config) {
  let token='token';
  //请求头携带token
  config.headers.Authorization = token
  return config;
}, function (error) {
  return Promise.reject(error);
});


let base='';
//传送json 格式的post 请求
export const postRequest=(url,params)=>{
  return axios({
    method:'POST',
    url:`${base}${url}`,
    data:params
  })
}