axios实现跨域及突破host和referer的限制

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);
      });
  },
};