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

 在webpack.dev.config.js中'usestrict'constutils=require('./utils')constwebpack=require('webpack')constconfig=requ

 在 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音乐搜索列表最新接口跨域设置方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！