vue 音乐App QQ音乐搜索列表最新接口跨域设置方法

Posted hudayang2008

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 音乐App QQ音乐搜索列表最新接口跨域设置方法相关的知识，希望对你有一定的参考价值。

 在 webpack.dev.config.js中

前端精品教程：百度网盘下载

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
‘use strict‘
const utils = require(‘./utils‘)
const webpack = require(‘webpack‘)
const config = require(‘../config‘)
const merge = require(‘webpack-merge‘)
const path = require(‘path‘)
const baseWebpackConfig = require(‘./webpack.base.conf‘)
const CopyWebpackPlugin = require(‘copy-webpack-plugin‘)
const htmlWebpackPlugin = require(‘html-webpack-plugin‘)
const FriendlyErrorsPlugin = require(‘friendly-errors-webpack-plugin‘)
const portfinder = require(‘portfinder‘)
  //-------------------axios 结合 node.js 代理后端请求 start
const express = require(‘express‘)
const axios = require(‘axios‘)
const app = express()
var apiRoutes = express.Router()
app.use(‘/api‘, apiRoutes)
  //-------------------axios 结合 node.js 代理后端请求 end
 
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
 
const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: config.dev.devtool,
 
  // these devServer options should be customized in /config/index.js
  devServer: {
    clientLogLevel: ‘warning‘,
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, ‘index.html‘) },
      ],
    },
    //----------------axios 结合 node.js 代理后端请求
    before(app) {
      // 推荐热门歌单
      app.get(‘/api/getDiscList‘, function(req, res) {
          var url = ‘https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg‘
          axios.get(url, {
            headers: {
              referer: ‘https://c.y.qq.com/‘,
              host: ‘c.y.qq.com‘
            },
            params: req.query
          }).then((response) => {
            res.json(response.data)
          }).catch((e) => {
            console.log(e)
          })
      }),
      // 歌词
      app.get(‘/api/getLyric‘, function(req, res) {
        var url = ‘https://c.y.qq.com/lyric/fcgi-bin/fcg_query_lyric_new.fcg‘
 
        axios.get(url, {
            headers: {
              referer: ‘https://c.y.qq.com/‘,
              host: ‘c.y.qq.com‘
            },
            params: req.query
          })
          .then((response) => {
            // jsonp 数据转为 json 数据
            var result = response.data
            if (typeof result === ‘string‘) {
              var reg = /^w+(({[^()]+}))$/
              var matches = result.match(reg)
 
              if (matches) {
                result = JSON.parse(matches[1])
              }
            }
            res.json(result)
            // res.json(response.data)
          })
          .catch((error) => {
            console.log(error)
          })
      }),
      //搜索列表接口
      // https://c.y.qq.com/soso/fcgi-bin/search_for_qq_cp
      app.get(‘/api/search‘, function(req, res) {
          var url = ‘https://c.y.qq.com/soso/fcgi-bin/search_for_qq_cp‘
          axios.get(url, {
            headers: {
              referer: ‘https://c.y.qq.com/‘,
              host: ‘c.y.qq.com‘
            },
            params: req.query
          }).then((response) => {
            res.json(response.data)
          }).catch((e) => {
            console.log(e)
          })
      })
    },
    //----------------axios 结合 node.js 代理后端请求
    hot: true,
    contentBase: false, // since we use CopyWebpackPlugin.
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay ? { warnings: false, errors: true } : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll,
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      ‘process.env‘: require(‘../config/dev.env‘)
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: ‘index.html‘,
      template: ‘index.html‘,
      inject: true
    }),
    // copy custom static assets
    new CopyWebpackPlugin([{
      from: path.resolve(__dirname, ‘../static‘),
      to: config.dev.assetsSubDirectory,
      ignore: [‘.*‘]
    }])
  ]
})
 
module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = process.env.PORT || config.dev.port
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err)
    } else {
      // publish the new Port, necessary for e2e tests
      process.env.PORT = port
        // add port to devServer config
      devWebpackConfig.devServer.port = port
 
      // Add FriendlyErrorsPlugin
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
        },
        onErrors: config.dev.notifyOnErrors ? utils.createNotifierCallback() : undefined
      }))
 
      resolve(devWebpackConfig)
    }
  })
})

在请求金封装的接口中

前端精品教程：百度网盘下载

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
/*
*搜索列表
*/
export function getSearch(query,page,zhida,perpage) {
 const url = ‘/api/search‘ //在webpack.dev.config启用了代理跨域
 // const url =‘https://c.y.qq.com/soso/fcgi-bin/search_for_qq_cp‘
 console.log(url)
 const data = Object.assign({}, commonParams, {
  // g_tk:5381,
  // uin:0,
  // format:json,
  // inCharset:utf-8,
  // outCharset:utf-8,
  // notice:0,
  // platform:h5,
  // needNewCode:1,
  // w:query,
  // zhidaqu:1,
  // catZhida: zhida ? 1 : 0,
  // t:0,
  // flag:1,
  // ie:utf-8,
  // sem:1,
  // aggr:0,
  // perpage:20,
  // n:20,
  // p:page,
  // n: perpage,
  // remoteplace:txt.mqq.all,
  // _:1537612841753
  //-----------------------------
  // w: query,
  // p: page,
  // perpage,
  // n: perpage,
  // catZhida: zhida ? 1 : 0,
  // zhidaqu: 1,
  // t: 0,
  // flag: 1,
  // ie: ‘utf-8‘,
  // sem: 1,
  // aggr: 0,
  // remoteplace: ‘txt.mqq.all‘,
  // uin: 0,
  // needNewCode: 1,
  // platform: ‘h5‘,
  // g_tk:5381,
  // _:1537612841753
  //---------------------------------测试官方数据
  g_tk:5381,
  uin:0,
  format:‘json‘,
  inCharset:‘utf-8‘,
  outCharset:‘utf-8‘,
  notice:0,
  platform:‘h5‘,
  needNewCode:1,
  w:query,
  zhidaqu:1,
  catZhida: zhida ? 1 : 0,
  t:0,
  flag:1,
  ie:‘utf-8‘,
  sem:1,
  aggr:0,
  perpage:perpage,
  n:20,
  p:page,
  remoteplace:‘txt.mqq.all‘,
  _:1537612841753
 })
 
 return axios.get(url, {
  params: data
 }).then((res) => {
  //成功后返回
  return Promise.resolve(res.data)
 })
}

以上是关于vue 音乐App QQ音乐搜索列表最新接口跨域设置方法的主要内容，如果未能解决你的问题，请参考以下文章

vue-music 跨域获取QQ音乐歌曲播放源

跨域的完全讲解

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

Vue 实现的音乐项目 music app 知识点总结分享

基于Vue.js的音乐播放器（Webapp）

基于Vue.js的音乐播放器（Webapp）