在vue中使用axios实现跨域请求并且设置返回的数据的格式是json格式,而不是jsonp格式

本文介绍如何在Vue项目中利用Axios解决跨域问题,通过配置代理服务器来请求QQ音乐API,获取歌曲列表数据。文章详细展示了前端与后端配合的过程,包括安装Axios、配置Webpack代理规则及编写前端请求代码。

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

在vue中使用axios实现跨域请求

需求分析:在项目中需要抓取qq音乐的歌曲列表的数据,由于要请求数据的地址url=https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg。从qq音乐的官网上可以看到该请求的请求头中的referer中的域名是y.qq.com(发送请求页面的域名),而host的域名是c.y.qq.com(被请求页面的域名),由于两者不一样,所以不能通过前端直接发送请求给qq服务器去拿数据。这时候需要服务器做一个代理:即前端向其所在域的服务器发送一个请求,然后所在域的服务器向qq音乐所在域的服务器发送请求,所在域的服务器拿到数据后,然后返回给前端。

在vue中使用axios实现跨域请求。axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

中文手册

github地址

下面介绍如何利用axios实现代理

1、首先使用npm安装axios到本地项目中

npm install axios --save

2、然后,在build/webpack.dev.conf.js中引入axois


3、在在build/webpack.dev.conf.js文件中的devServer对象添加属性函数before(app){}


完整的代码如下

before(app){
      // 由于请求的referer和host不同,所以前端不能拿到数据,需要后端做一个代理
      //  后端向有数据的服务端发送请求,拿到数据,然后前端在向自己的服务器请求那数据
      //  这里使用axios实现ajax请求:axios是一个基于promise的HTTP库,可以用于浏览器和node.js
      // 在浏览器创建XMLHttpRequest对象,从node.js创建http请求
      app.get('/api/getDiscList',(req, res) => {//这里的路径是给前端发送请求的url
        let url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg
        // axios发送get请求,可以自己配置config
        axios.get(url, {
          headers: {
            'referer': 'https://c.y.qq.com/',
            'host': 'c.y.qq.com',
          },
          //  params是即将与请求一起发送的url参数,无格式对象/URLSearchParams对象
          params: req.quest
        }).then((response) => {
          res.json(response.data)  //返回数据
        }).catch((error) => {
          console.log(error)
        })
      })
    }

4、在前端书写js代码

1)定义一个recommend.js文件,内容如下

import axios from 'axios'
//获取歌曲列表的数据
//由于这里使用了代理请求,所以前端的请求要改成ajax请求
export function getDisList() {
  const url = '/api/getDiscList'
  const data = {
    picmid: 1,
    rnd: Math.random(),
    g_tk: 5381,
    jsonpCallback: 'getPlaylist',
    loginUin: '0',
    hostUin: 0,
    format: 'json',
    inCharset: 'utf8',
    outCharse: 'utf-8',
    notice: 0,
    platform: 'yqq',
    needNewCode: 0,
    categoryId: 10000000,
    sortId: 5,
    sin: 0,
    ein: 29
  }
  //使用ajax请求,这里用axios
  return axios.get(url, {
    params: data
  }).then((res) => {
    //  成功返回一个Promise对象
    return Promise.resolve(res.data)
  }).catch((error) => {
    console.log(error)
  })
}

2)在recommend.vue文件的<script>中书写下面内容

<script>
import {getDisList} from '../../api/recommend'
export default {
  //  获取数据
  created() {
    this._getDiscList()
  },
  methods: {
    //  获取歌单列表的数据
    _getDiscList() {
      getDisList().then((res) => {
        console.log(res)
      })
    }
  }
}
</script>

5、在浏览器console.log()输出的内容

'MusicJsonCallback({"code":0,"subcode":0,"message":"","default":0,"data":{"uin":0,"categoryId":0,"sortId":5,"sum":0,"sin":0,"ein":0,"list":[]}})'

即输出的是jsonp的格式,即字符串

6、将返回的数据设置成json的格式:由于返回的数据是字符串,那么可以对其进行截取,在利用JSON.parse()将字符串转换成json的形式

<script>
import {getDisList} from '../../api/recommend'
export default {
  //  获取数据
  created() {
    this._getDiscList()
  },
  methods: {
    //  获取歌单列表的数据
    _getDiscList() {
      getDisList().then((res) => {
        console.log(res)
        let num1 = res.indexOf('(')
        let num2 = res.indexOf(')')
        let resultData = JSON.parse(res.substring(num1 + 1, num2))
        console.log(typeof(resultData))
        console.log(resultData)
      })
    }
  }
}
</script>

输出如下


以上大概就是利用axios实现服务端的代理请求











Vue是一款非常流行的JavaScript框架,而Axios是一个基于Promise的HTTP客户端工具库。然而,在使用VueAxios时,我们可能会遇到问题。当我们从一个名发送HTTP请求到另一个名时,由于浏览器的同源策略限制,会产生问题。Jsonp是一种解决问题的方法之一。 Jsonp全称为JSON with Padding,它通过在前端创建一个script标签,并设置其src属性为包含回调函数的URL,来实现请求。服务器在收到请求后,将返回一个JavaScript函数调用,并将数据作为参数传入该函数中。这样,前端页面就可以通过定义该回调函数,获取到服务器返回数据。 在Vue使用Axios发送Jsonp请求,可以通过设置Axios的`params`选项来实现。具体步骤如下: 1. 首先,在Vue项目中安装Axios库:`npm install axios` 2. 然后在Vue组件中引入Axios:`import axios from 'axios'` 3. 创建一个方法来发送Jsonp请求: ```javascript methods: { fetchData() { axios({ method: 'jsonp', url: 'http://example.com/api', params: { callback: 'jsonpCallback', // 回调函数名 } }) .then(response => { console.log(response.data); // 获取到服务器返回数据 }) .catch(error => { console.log(error); }); } } ``` 4. 在上述代码中,通过设置`params`属性将回调函数名传递给服务器。服务器在返回数据时,会将回调函数名拼接到返回数据的尾部。 5. 最后,在模板或其他地方调用该方法,即可发送Jsonp请求来获取数据。 需要注意的是,由于Jsonp使用`<script>`标签加载数据,因此只能发送GET请求。同时,为了保证安全性,我们需要对返回数据进行校验和过滤,以防止恶意注入脚本。 以上就是通过VueAxios发送Jsonp请求来解决问题的方法。希望这能对你有所帮助!
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值