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

最新推荐文章于 2025-03-10 21:21:24 发布

weixin_43756060

最新推荐文章于 2025-03-10 21:21:24 发布

阅读量9.5k

点赞数 4

分类专栏： VUE

本文链接：https://blog.csdn.net/weixin_43756060/article/details/93618660

版权

VUE 专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中配置跨域请求，以QQ音乐API为例，展示了vue.config.js的代理设置及axios的GET请求使用，适用于前后端分离项目的跨域问题解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

跨域请求设置

以qq音乐为例

配置vue.config.js

   devServer: {
    proxy: { // 代理跨域
      '/api': { // 代理url关键字
        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'
        }
      }
}

ajax请求

import axios from 'axios'
// 获取轮播图数据
export function banner () {
  return axios({
    method: 'get',
    url: '/api/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg',
    params: {
      // 参数
    }
  })
}
// 获取歌曲列表
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
  })
}

注意请求的路径后面跟的参数一定要用params传递

在需要的组件内调用

import { banner, songList } from '../../api/store'
export default {
  data () {
    return {
      bannerList: [],
      songList: []
    }
  },
  created () {
    this.getBanner()
    this.getSongList()
  },
  methods: {
    getBanner () {
      banner().then(res => {
        if (res.status === 200) {
          this.bannerList = res.data.data.slider
        }
      })
    },
    getSongList () {
      songList().then(res => {
        if (res.status === 200) {
          this.songList = res
        }
      })
    }
  }
}