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 相关文章推荐
JavaScript 学习笔记(九)call和apply方法
Jan 11 Javascript
jQuery 方法大全方便学习参考
Feb 25 Javascript
JQuery动画和停止动画实例代码
Mar 01 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
Sep 26 Javascript
js纯数字逐一停止显示效果的实现代码
Mar 16 Javascript
JavaScript事件处理的方式(三种)
Apr 26 Javascript
聊一聊JavaScript作用域和作用域链
May 03 Javascript
js实现带农历和八字等信息的日历特效
May 16 Javascript
js基于setTimeout与setInterval实现多线程
Jun 17 Javascript
微信小程序实现轮播图效果
Sep 07 Javascript
JS 4个超级实用的小技巧 提升开发效率
Oct 05 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
php伪静态之APACHE篇
2014/06/02 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
IE6下拉框图层问题探讨及解决
2014/01/03 Javascript
document.execCommand()的用法小结
2014/01/08 Javascript
JS(JQuery)操作Array的相关方法介绍
2014/02/11 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
javascript 原型链维护和继承详解
2014/11/26 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
2016/01/19 Javascript
requireJS使用指南
2016/04/27 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
js回调函数仿360开机
2019/12/26 Javascript
Python获取网页上图片下载地址的方法
2015/03/11 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
Python输出指定字符串的方法
2020/02/06 Python
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
自荐信的基本格式
2014/02/22 职场文书
教学评估实施方案
2014/03/16 职场文书
人力资源部岗位职责
2015/02/11 职场文书
大学生就业推荐表自我评价
2015/03/02 职场文书
档案工作个人总结
2015/03/03 职场文书
2015年教研组工作总结
2015/05/04 职场文书
看雷锋电影观后感
2015/06/10 职场文书
新闻稿格式范文
2015/07/18 职场文书
详解MySQL多版本并发控制机制(MVCC)源码
2021/06/23 MySQL
《原神》新角色演示“神里绫人:林隐泓洄” 宠妹狂魔
2022/04/03 其他游戏