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

時間  2019-11-20
標籤 vue 音樂 app 搜索 列表 最新 接口 設置 方法 欄目 騰訊 简体版
原文   原文鏈接

 在 webpack.dev.config.js中css

前端精品教程：百度網盤下載html

?
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)
     }
   })
})

在請求金封裝的接口中前端

前端精品教程：百度網盤下載node

?
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)
  })
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程