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 相关文章推荐
DHTML 中的绝对定位
Nov 26 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
javascript中new关键字详解
Dec 14 Javascript
理解JavaScript中Promise的使用
Jan 18 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 Javascript
微信小程序常用赋值方法小结
Apr 30 Javascript
vue配置文件实现代理v2版本的方法
Jun 21 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 Javascript
vue中echarts引入中国地图的案例
Jul 28 Javascript
JavaScript中CreateTextFile函数
Aug 30 Javascript
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
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显示指定目录下子目录的方法
2015/03/20 PHP
php实现网站留言板功能
2015/11/04 PHP
PHP中phar包的使用教程
2017/06/14 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
使用forever管理nodejs应用教程
2014/06/03 NodeJs
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
实践中学习AngularJS表单
2016/03/21 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
js replace()去除代码中空格的实例
2017/02/14 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
JavaScript实现分页效果
2017/03/28 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
面包屑导航详解
2017/12/07 Javascript
浅谈redux以及react-redux简单实现
2018/08/28 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
Node.js创建一个Express服务的方法详解
2020/01/06 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
基于Vue中的父子传值问题解决
2020/07/27 Javascript
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
Python生成数字图片代码分享
2017/10/31 Python
python 反向输出字符串的方法
2018/07/16 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
简述python Scrapy框架
2020/08/17 Python
Boutique 1美国:阿联酋奢侈时尚零售商
2017/10/16 全球购物
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
精选奢华:THE LIST
2019/09/05 全球购物
遗嘱公证书标准样本
2014/04/08 职场文书
办公室主任岗位承诺书
2014/05/29 职场文书
学期个人自我总结
2015/02/13 职场文书
Pandas实现批量拆分与合并Excel的示例代码
2022/05/30 Python