vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
程序员文章站
2022-08-26 09:47:48
在 webpack.dev.config.js中
'use strict'
const utils = require('./utils')
co...
在 webpack.dev.config.js中
'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) } }) })
在请求金封装的接口中
/* *搜索列表 */ 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音乐搜索列表最新接口跨域设置方法,希望对大家有所帮助
下一篇: 支付宝app支付服务端的实现-Java版