vue 音乐App QQ音乐搜索列表最新接口跨域设置
时间:2018-09-22
本文章向大家介绍vue 音乐App QQ音乐搜索列表最新接口跨域设置,需要的朋友可以参考一下
在 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) }) }
- HDUOJ -----1864 最大报销额(动态规划)
- 行受影响 是什么意思
- c++课程设计(日历)
- 一个程序,让你理解运算符重载操作
- HDUOJ ---1423 Greatest Common Increasing Subsequence(LCS)
- 在运算符重载++,--,+=,-=...
- 排序一栏(总结帖)
- 编程思想 之「异常及错误处理」
- nyoj-----284坦克大战(带权值的图搜索)
- nyoj-----42一笔画问题
- hdu-------1081To The Max
- nyoj------170网络的可靠性
- HDUOJ-------1052Tian Ji -- The Horse Racing(田忌赛马)
- 初学Java之Pattern与Matcher类
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 基于 Symfony 组件封装 HTTP 请求响应类
- 通过 PHP 原生代码实现 HTTP 路由器
- MySQL组复制(MGR)全解析 Part 10 MGR新增节点
- 基于 gorilla/sessions 在 Go 语言中管理 Session
- 通过 PHP 原生代码实现 HTTP 控制器
- Go 视图模板篇(一):模板引擎的定义、解析与执行
- Mycat分库分表全解析 Part 6 Mycat 全局序列号
- 通过 PHP 原生代码实现视图模板引擎的解析和渲染
- [MySQL故障处理]记一次innobackupex导致的从库无法同步的问题
- [Oracle 故障处理]记一次DG数据文件无法创建的问题
- mysqldump命令详解 4-按条件备份表数据
- mysqldump命令详解 5-导出事件,函数和存储过程
- [Oracle集群软件全解析]Oracle Cluster Registry Utility 参考
- mysqldump命令详解 Part 8 其他的一些的参数的介绍
- mysqldump命令详解 Part 6- --master-data参数的使用