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


Posted in Javascript onSeptember 25, 2018

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

Javascript 相关文章推荐
JS 分号引起的一段调试问题
Jun 18 Javascript
jquery 学习笔记 传智博客佟老师附详细注释
Sep 12 Javascript
7个Javascript地图脚本整理
Oct 20 Javascript
javascript学习笔记(三)显示当时时间的代码
Apr 08 Javascript
JavaScript利用append添加元素报错的解决方法
Jul 01 Javascript
简单实现js间歇或无缝滚动效果
Jun 29 Javascript
javascript中神奇的 Date对象小结
Oct 12 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
JS实现字符串去重及数组去重的方法示例
Apr 21 Javascript
vue学习之Vue-Router用法实例分析
Jan 06 Javascript
原生JS实现无缝轮播图片
Jun 24 Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 Javascript
Vue页面跳转动画效果的实现方法
Sep 23 #Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 #Javascript
vue如何解决循环引用组件报错的问题
Sep 22 #Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
Sep 22 #Javascript
angular的输入和输出的使用方法
Sep 22 #Javascript
vue构建动态表单的方法示例
Sep 22 #Javascript
小程序实现展开/收起的效果示例
Sep 22 #Javascript
You might like
解决中英文字符串长度问题函数
2007/01/16 PHP
一个基于PDO的数据库操作类
2011/03/24 PHP
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
php curl基本操作详解
2013/07/23 PHP
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
js获取当前select 元素值的代码
2010/04/19 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
2010/05/10 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
js纯数字逐一停止显示效果的实现代码
2016/03/16 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
JS中min函数实例讲解
2019/02/18 Javascript
如何在JavaScript中谨慎使用代码注释
2019/06/21 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
python实现闹钟定时播放音乐功能
2018/01/25 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
HTML5新增的8类INPUT输入类型介绍
2015/07/06 HTML / CSS
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
美国一站式电动和手动工具商店:International Tool
2020/11/26 全球购物
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
PHP数据运算类型都有哪些
2013/11/05 面试题
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
医学专业大学生求职的自我评价
2013/11/27 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
我们的节日元宵活动方案
2014/08/23 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
2016猴年春节慰问信
2015/11/30 职场文书
python中Tkinter 窗口之输入框和文本框的实现
2021/04/12 Python